CSS / 8. Отступы, рамки и поля

Если вы похожи на большинство веб-разработчиков конца 1990-х, то при верстке всех своих страниц применяете таблицы. И делаете это, конечно, потому, что таблицы позволяют создавать врезки и настраивать сложную структуру всего представления страницы. Не исключено применение таблиц и в более простых случаях, таких как размещение текста в цветном блоке с рамкой. Хотя, если подумать, такую простую задачу можно решить и без помощи таблиц. Если вам нужен абзац с красной рамкой и желтым фоном, не проще ли его просто создать, а не устраивать канитель с помещением его в таблицу, состоящую из единственной ячейки?
Статьи раздела '8. Отступы, рамки и поля':
Абсолютные значения и поля
Как утверждалось ранее, при задании полей элемента могут использоваться значения, выраженные в любых единицах измерения длины. Это достаточно просто: например, создадим вокруг абзацев свободное место в 10 пикселов. Следующее прави...
Задание рамки одним свойством
Теперь обратимся к самому краткому формату задания свойств рамок: border. Преимущество данного свойства состоит в его исключительной компактности, хотя она и вводит некоторые ограничения. Прежде чем заняться этим, давайте посмотри...
Несколько стилей
Для одной рамки можно задавать несколько стилей. Например: p.aside {border-style: solid dashed dotted solid;} В результате получаем абзац со сплошной верхней рамкой, пунктирной рамкой справа, точечной рамкой снизу и сплошной...
Основные блоки элементов
Все элементы документа генерируют прямоугольный блок, называемый блоком элемента (element box), который описывает пространство, занимаемое элементом в компоновке документа. Следовательно, каждый блок влияет на расположение и разме...
Отрицательные и свернутые поля
Существует возможность задавать элементу отрицательные поля. Это может привести к тому, что блок элемента будет выходить за рамки его родителя или перекрывать другие элементы без нарушения модели блоков. Рассмотрим следующие прави...
Отступ с одной стороны
Наверняка вы догадались: существуют свойства, позволяющие задавать отступы с одной стороны блока, не затрагивая другие. Эти свойства действуют так, как и предполагается. Например, следующие два правила обеспечат одинаковые отступы...
Отступы
Между рамками и областью содержимого мы обнаруживаем отступы (padding) блока элемента. Неудивительно, что самое простое свойство, применяемое для работы с этой областью, называется padding. Как видите, это свойство принимает знач...
Отступы и замещаемые элементы
Возможно, это покажется удивительным, но можно применять отступы к замещаемым элементам, хотя на момент написания данной книги все еще существуют некоторые ограничения. Самое удивительное, что отступы можно применять к изображения...
Отступы и строковые элементы
Когда дело касается строковых элементов, между полями и отступами существует одно основное отличие. Для иллюстрации давайте начнем с отступов слева и справа. Здесь, если задать значения для отступа справа или слева, они будут види...
Полное отсутствие рамки
До сих пор мы говорили только о применении видимых стилей рамок, таких как solid или outset. Теперь посмотрим, что происходит, когда свойству border-style присваивается значение none: p {margin: 5px; border-style: none; border-...
Поля
Разделение большинства элементов в нормальном потоке происходит за счет полей, призванных создавать вокруг элемента дополнительное пустое пространство. Под «пустым пространством» обычно подразумевается область, в которой не может ...
Поля и строковые элементы
Поля могут применяться и в строковых элементах, хотя последствия будут несколько иными. Скажем, требуется задать верхнее и нижнее поля для особо выделяемого текста: strong {margin-top: 25px; margin-bottom: 50px;} Это разреше...
Прозрачные рамки
Как вы помните, если у рамки нет стиля, то она не имеет и ширины. Однако возможны ситуации, когда надо создать невидимую рамку. Тут-то и появляется значение цвета рамки transparent (введено в CSS2). Это значение применяется для со...
Процентные значения и отступы
Мы уже говорили, что отступы элементов можно задавать процентными значениями. Как и в случае с полями, процентные значения для отступов вычисляются относительно ширины родительского элемента, таким образом они могут меняться при и...
Процентные значения и поля
Как уже говорилось, значения полей элемента можно задавать в процентах. Процентные значения вычисляются относительно ширины родительского элемента, следовательно, они меняются, если каким-либо образом изменяется ширина родительско...
Рамки
Внутри полей элемента находятся его рамки (borders). Рамка элемента – это одна или несколько линий, окружающих содержимое и отступы элемента. Таким образом, фон элемента будет ограничен внешним краем рамки, поскольку фон не распро...
Рамки и строковые элементы
Работа с рамками в строковых элементах не должна казаться вам чемто незнакомым, поскольку правила преимущественно аналогичны тем, которые касались применения полей в строковых элементах. Тем не менее я кратко коснусь этой темы вно...
Рамки и фон
В спецификации CSS совершенно определенно подразумевается, что фон элемента распространяется до внешнего края рамки, поскольку упоминается, что рамки отрисовываются «поверх фона элемента». Это важно, потому что некоторые рамки «пр...
Рамки, имеющие стиль
Начнем со стилей рамок – самого важного их параметра – не потому, что они управляют представлением рамки (хотя, конечно, они это делают), но потому, что без стиля рамки вообще не будут отображены. CSS определяет 10 отдельных отлич...
Свойства для задания поля с одной стороны
К счастью, существует способ задать поле только с одной стороны элемента. Скажем, надо задать элементам h2 поле в 3em только слева. Вместо свойства margin, требующего набора большого количества символов, можно выбрать такой подход...

Страницы: 1 2