|
Ноя
25
|
Отступы и блоки |
margin
Описание
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).
Рис. 1. Отступ от левого края элемента
Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора <BODY> равное нулю. Параметр margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон.
Синтаксис
margin: значение | auto {1,4}
Аргументы
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в табл. 1.
| Табл. 1. Зависимость от числа аргументов | |
| Число аргументов | Результат |
| 1 | Отступы будут установлены для всех сторон элемента. |
| 2 | Первый аргумент устанавливает отступ от верхнего и нижнего края, второй аргумент — от левого и правого. |
| 3 | Первый аргумент задает отступ от верхнего края, второй — одновременно от левого и правого края, а третий — от нижнего края. |
| 4 | Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края. |
Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.
Пример
BODY {
margin: 0; /* Убираем отступы */
}
margin: 20%; /* Отступы вокруг элемента */
margin: 10px; /* Отступы вокруг */
margin-bottom
Описание
Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента.
Синтаксис
margin-bottom: значение | auto
Аргументы
Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.
Пример margin-bottom: -7px; /* Отступ снизу */
margin-left
Описание
Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента.
Синтаксис
margin-left: значение | auto
Аргументы
Величину левого отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.
Пример margin-left: 20%; /* Отступ слева */
margin-right
Описание
Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента.
Синтаксис
margin-right: значение | auto
Аргументы
Величину правого отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.
Пример margin-right: 25%; /* Отступ справа */
margin-top
Описание
Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента.
Синтаксис
margin-top: значение | auto
Аргументы
Величину верхнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.
Пример margin-top: 20%; /* Отступ сверху */
padding
Описание
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).
Рис. 1. Поле слева от текста
Параметр padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.
Синтаксис
padding: значение | auto {1, 4}
Аргументы
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в табл. 1.
|
Табл. 1. Зависимость от числа аргументов
|
|
| Число аргументов | Результат |
| 1 | Поля будут установлены для всех сторон содержимого элемента. |
| 2 | Первый аргумент устанавливает поле от верхнего и нижнего края содержимого, второй аргумент — от левого и правого. |
| 3 | Первый аргумент задает поле от верхнего края содержимого, второй — одновременно от левого и правого края, а третий — от нижнего края. |
| 4 | Поочередно устанавливаются поля от верхнего, правого, нижнего и левого края содержимого. |
Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Аргумент auto указывает, что размер полей будет автоматически рассчитан браузером.
Пример padding: 20px; /* Поля вокруг текста */
padding-bottom
Описание
Устанавливает значение поля от нижнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Синтаксис
padding-bottom: значение | auto
Аргументы
Величину нижнего поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Аргумент auto указывает, что размер поля будет автоматически рассчитан браузером.
Пример padding-bottom: 40px; /* Поле снизу от текста */
padding-left
Описание
Устанавливает значение поля от левого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Синтаксис
padding-left: значение | auto
Аргументы
Величину левого поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Аргумент auto указывает, что размер поля будет автоматически рассчитан браузером.
Пример padding-left: 10%; /* Поле слева */
padding-right
Описание
Устанавливает значение поля от правого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Синтаксис
padding-right: значение | auto
Аргументы
Величину правого поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Аргумент auto указывает, что размер поля будет автоматически рассчитан браузером.
Пример padding-right: 90px; /* Поле справа */
padding-top
Описание
Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Синтаксис
padding-top: значение | auto
Аргументы
Величину верхнего поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Аргумент auto указывает, что размер поля будет автоматически рассчитан браузером.
Пример
padding-top: 10%; /* Поле сверху */
float
Описание
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение параметра float равно none, элемент выводится на странице как обычно, самое большое — одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Синтаксис
float: left | right | none
Аргументы
left — Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне. right — Выравнивает элемент по правому краю, а все остальные элементы огибают его по левой стороне. none — Обтекание элемента не задается.
Пример
float: left; /* Обтекание по правому краю */
width
Описание
Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <IMG>). Ширина не включает толщину границ вокруг элемента, значение отступов и полей. Браузеры неодинаково работают с шириной, результат отображения зависит от используемого DOCTYPE. В табл. 1 приведены возможные варианты DOCTYPE и получаемая ширина.
|
Табл. 1. Действие width в браузерах
|
|||
| DOCTYPE | Internet Explorer | Firefox | Opera |
| Не указан | Если содержимое превышает заданную ширину, то блок изменяет свои размеры, подстраиваясь под содержимое. В противном случае ширина блока равна значению width. | Во всех случаях Firefox действует по спецификации CSS. А именно, ширина блока получается сложением значений width, padding, margin и border. Содержимое блока, если не помещается в заданные размеры, отображается поверх блока. | Ширина равна значению width. Содержимое блока, если не помещается в заданные размеры, отображается поверх. |
| «Переходный» <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»> | |||
| «Строгий» <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»> | Ширина формируется путем сложения значений width, padding, margin и border. Содержимое блока, если не помещается в заданные размеры, отображается поверх. | Ширина равна значению width плюс padding, margin, и border. Содержимое блока, если не помещается в заданные размеры, отображается поверх. | |
| XHTML <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»> | |||
Синтаксис
width: значение | проценты | auto
Аргументы
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. Аргумент auto устанавливает ширину исходя из типа и содержимого элемента.
Пример
.layer2 {
width: 400px; /* Ширина текстового блока */
}
height
Описание
Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <IMG>). Высота не включает толщину границ вокруг элемента, значение отступов и полей. Браузеры по-разному реагируют на настройки высоты элемента. Если его содержимое превышает указанную высоту, то Internet Explorer и Opera проигнорируют значение параметра height и автоматически подстроят высоту под контент. Браузер Netscape (а также Mozilla и Firefox) оставит высоту элемента неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML они идут последовательно. Чтобы этого не произошло, можно добавить свойство overflow: auto к стилю элемента.
Синтаксис
height: значение | проценты | auto
Аргументы
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. Аргумент auto устанавливает высоту исходя из содержимого элемента
Пример
height: 50px; /* Высота блока */
overflow
Описание
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Синтаксис
overflow: auto | hidden | scroll | visible
Аргументы
visible — Отображается все содержание элемента, даже за пределами установленной высоты и ширины. hidden — Отображается только область внутри элемента, остальное будет обрезано. scroll — Всегда добавляются полосы прокрутки. auto — Полосы прокрутки добавляются только при необходимости.
Пример
overflow: scroll; /* Добавляем полосы прокрутки */
Возможно, Вам будет полезна эта информация:
Новые комментарии