Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 7:

Отступы в СSS

< Лекция 6 || Лекция 7: 12 || Лекция 8 >
Аннотация: Определяются методы и свойства, необходимые для описания пространства вокруг элементов.
Ключевые слова: css, пространство

Отступы в CSS определяют пространство вокруг элементов.

Примеры

  1. Этот пример показывает, как задать для текста левый отступ.
    <html>
    <head>
    <style type="text/css">
    h1.lf {margin-left: 1cm}
    </style>
    </head>
    
    <body>
    <h1>Заголовок h1 без отступов</h1>
    <h1 class="lf">Заголовок h1 с отступами</h1>
    </body>
    
    </html>
  2. Этот пример показывает, как задать для текста правый отступ.
    <html>
    <head>
    <style type="text/css">
    h2.rg {margin-right: 400px}
    </style>
    </head>
    
    <body>
    <h2> Заголовок h2 без отступов </h2>
    <h2 class="rg"> Заголовок h2 с заданным правым отступом</h2>
    </body>
    
    </html>
  3. Этот пример показывает, как задать для текста верхний отступ.
    <html>
    <head>
    <style type="text/css">
    h1.tp {margin-top: 50px}
    </style>
    </head>
    
    <body>
    <h1>Заголовок h1 без отступов </h1>
    <h1 class="tp"> Заголовок h1 с заданным верхним отступом</h1>
    </body>
    </html>
  4. Этот пример показывает, как задать нижний отступ текста.
    <html>
    <head>
    <style type="text/css">
    h2.btm {margin-bottom: 1cm}
    </style>
    </head>
    
    <body>
    <h2>Заголовок h2 без отступов</h2>
    <h2 class="btm">Заголовок h2 с заданным нижним отступом</h2>
    <h2>Заголовок h2 без отступов</h2>
    </body>
    
    </html>
  5. Этот пример показывает, как задать параметры всех отступов в одном объявлении.
    <html>
    <head>
    <style type="text/css">
    h1.all {margin: 1cm 2cm 1cm 2cm}
    </style>
    </head>
    
    <body>
    <h1>Заголовок h1 без отступов</h1>
    <h1 class="all">Заголовок h1 с заданными отступами</h1>
    <h1>Заголовок h1 без отступов</h1>
    </body>
    
    </html>

Отступы в CSS

Они определяют пространство вокруг элементов. Допускают использование отрицательных значений для того, чтобы создавать наложение содержимого. Все отступы (верхний, правый, нижний и левый) можно изменять независимо, используя отдельные параметры, а можно использовать параметр margin для изменения всех отступов одновременно.

Отступы заданные по умолчанию в браузерах:

Netscape и Internet Explorer — тег body имеет отступ, равный 8px. Opera вместо этого использует по умолчанию поле величиной 8px.

Таким образом, если требуется настроить отступы для всей страницы, чтобы они правильно выводились в Opera, то для body необходимо задать также поле!

Поддерживается следующими браузерами: Internet Explorer, Firefox, Netscape.

Параметр Описание Значения IE F N W3C
margin Параметр для задания отступов в одном объявлении margin-top 4 1 4 1
margin-right
margin-bottom
margin-left
margin-bottom Задает нижний отступ элемента auto 4 1 4 1
length
%
margin-left Задает левый отступ элемента auto 3 1 4 1
length
%
margin-right Задает правый отступ элемента auto 3 1 4 1
length
%
margin-top Задает верхний отступ элемента auto 3 1 4 1
length
%
< Лекция 6 || Лекция 7: 12 || Лекция 8 >
Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Елена Елаева
Елена Елаева
Россия
Владимир Лагодный
Владимир Лагодный
Россия