Для начала я бы хотел поговорить об использовании свойство
outline
, которое на первый взгляд кажется подобным свойствуborder
.
Однако у свойства outline
есть существенное отличие, которое приобретает очень важное значение при создании разметки. Свойство outline
может быть полезным в процессе создания разметки в качестве удобного средства диагностики.
Во время создания разметки можно визуально обозначить местоположение всех ее частей.
Например, таким образом:
div {outline: 1px solid #ff0000}
Вы можете решить, что точно так можно сделать и с помощью свойства border
, но в действительности это не так. Причина заключается в том, что границы (border
) нарушают разметку. А свойство outline
не нарушает ее.
Вот что я имею ввиду: предположим, у вас есть три колонки div
‘ов, которые должны располагаться внутри контейнера-родителя div
с шириной 960px. (Если вам не нравятся пиксели, то можете применить для этой же цели em
, проценты или любую другую единицу измерения).
Для всех трех div
‘ов-потомков устанавливаем правила float: left; width: 33.33%
и попытаемся визуально обозначить местоположение в разметке каждого из блоков.
Если ко всем трем блокам вы добавите свойство border: 1px solid #ff0000;
, то последний из этих трех опустится вниз и расположиться под двумя первыми:
Это произошло потому, что каждый из трех блоков div
имеет ширину 320px; помимо этого справа и слева к каждому блоку добавлена граница толщиной в 1px
, что делает ширину блока равной, как минимум, 322px
.
Умножте это значение ширины на 3 (количество блоков-колонок) и в результате получиться общая ширина 966px, что явно больше ширины блока-родителя 960px. Результат для браузера - сместить последний блок вниз!
Именно по этой причине свойство border
нарушает разметку. Свойство outline
, с другой стороны, не нарушает ее. С помощью него вокруг элементов рисуется линия; к примеру, в нашем случае все три блока div
со свойством outline: 1px solid #ff0000;
разместятся друг рядом с другом внутри блока-родителя.
Не имеет значения, какой толщины вы сделаете outline
, блоки div
никогда не сдвинуться и не нарушат разметку (это касается не только блока div
, а любого элемента страницы). Линии сделают перекрытие друг друга, как показано на рисунке ниже:
Сразу становится ясно преимущество использования outline
при создании разметки. Если в процессе ее создания вам кажется, что что-то идет не так, вы легко можете “нарисовать” границы интересующего вас элемента, не опасаясь при этом нарушить разметку.
Другое отличие outline
от border
заключается в том, что outline
“рисуется” обязательно вокруг всего элемента, по всем четырем его сторонам.
Другими словами, вы не можете просто создать левый outline
или же правый outline
, как вы это обычно делаете при работе с границами border
. Может существовать только граница outline
вокруг всех четырех сторон элемента, и не может быть по другому.
По этой же причине невозможно изменять цвет, ширину или стиль какой-либо одной из сторон элемента. Если необходимо создать границу outline: 2px dashed yellow
, то она будет создана таковой вокруг всех сторон элемента.
Заметьте, что элемент может одновременно иметь оба свойства border
и outline
. В этом случае граница outline
будет отрисована браузером снаружи от границы border
, так что внутренний край outline
будет соприкасаться с внешним краем границы border
:
Если элемент также имеет margin
, то эти поля рисуются вокруг границ outline
; но при этом outline
не изменяют поля margin
и не замещают их.
Автор статьи: Eric Meyer - “Smashing CSS Professional Techniques for Modern Layout”
Комментарии