Отступы в CSS
Они определяют пространство вокруг элементов. Допускают использование отрицательных значений для того, чтобы создавать наложение содержимого. Все отступы (верхний, правый, нижний и левый) можно изменять независимо, используя отдельные параметры, а можно использовать параметр margin для изменения всех отступов одновременно.
Отступы заданные по умолчанию в браузерах:
Netscape и Internet Explorer — тег body имеет отступ, равный 8px. Opera вместо этого использует по умолчанию поле величиной 8px.
Таким образом, если требуется настроить отступы для всей страницы, чтобы они правильно выводились в Opera, то для body необходимо задать также поле!
Поддерживается следующими браузерами: Internet Explorer, Firefox, Netscape.
| 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 | ||||||
| % |
Параметр 'margin'
Параметр определяет все отступы в одном объявлении. Позволяет определять отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
| margin-top | Задают свойства отступов. Значения задаются в % (определяет отступ в % общей высоты/ширины документа), длиной (определяет фиксированный отступ) и автоматически (отступ задает браузер) |
| margin-right | |
| margin-bottom | |
| margin-left |
Примеры:
p {margin: 2px} все четыре отступа будут иметь отступ, равный 2px.
p {margin: 5px 10%} верхний и нижний отступ будут по 5px, левый и правый отступ будут составлять 10% общей ширины документа.
p {margin: 5px 10% -2px} верхний отступ будет равен 5px, левый и правый отступ будут составлять 10% общей ширины документа, нижний отступ будет равен 2px.
p {margin: 5px 10% -2px auto} верхний отступ будет 5px, правый отступ будет составлять 10% общей ширины документа, нижний отступ будет 2px, левый отступ будет задан браузером.
Параметр 'margin-bottom'
Данный параметр задает нижний отступ элемента. Позволяет определять отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
| Auto | Нижний отступ задает браузер |
| Length | Определяет фиксированный нижний отступ |
| % | Определяет нижний отступ в % от общей высоты документа |
Примеры:
p { margin-bottom: 5% }
p { margin-bottom: auto }
Параметр 'margin-left'
Этот параметр задает левый отступ элемента. Позволяет определять отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
| Auto | Левый отступ задает браузер |
| Length | Определяет левый отступ фиксированной ширины |
| % | Определяет левый отступ в % общей ширины документа |
Примеры:
p { margin-left: 2% }
p { margin-left: -5px }
Параметр 'margin-right'
Этот параметр задает правый отступ элемента. Позволяет определять отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
| Auto | Правый отступ задает браузер |
| Length | Определяет правый отступ фиксированной величины |
| % | Определяет правый отступ в % общей ширины документа |
Примеры:
p { margin-right: 2px }
p { margin-right: 10% }
Параметр 'margin-top'
Данный параметр задает верхний отступ элемента. Позволяет определять отрицательные значения.
Наследование: нет.
Возможные значения:
| Auto | Верхний отступ задает браузер |
| Length | Определяет верхний отступ фиксированной ширины |
| % | Определяет верхний отступ в % от общей высоты документа |
Примеры:
p { margin-top: auto }
p { margin-top: -5px }
Этот пример показывает, как задать
- Этот пример показывает, как задать для текста левый отступ. <html> <head> <style type="text/css"> h1.lf {margin-left: 1cm} </style> </head>
<body> <h1>Заголовок h1 без отступов</h1> <h1 class="lf">Заголовок h1 с отступами</h1> </body>
</html>Этот пример показывает, как задать для текста правый отступ. <html> <head> <style type="text/css"> h2.rg {margin-right: 400px} </style> </head>
<body> <h2> Заголовок h2 без отступов </h2> <h2 class="rg"> Заголовок h2 с с заданным правым отступом</h2> </body>
</html> Этот пример показывает, как задать для текста верхний отступ. <html> <head> <style type="text/css"> h1.tp {margin-top: 50px} </style> </head>
<body> <h1>Заголовок h1 без отступов </h1> <h1 class="tp"> Заголовок h1 с заданным верхним отступом</h1> </body> </html> Этот пример показывает, как задать нижний отступ текста. <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> Этот пример показывает, как задать параметры всех отступов в одном объявлении. <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>
