CSS-разметка - применение outline вместо border

Для начала я бы хотел поговорить об использовании свойство

1

outline

, которое на первый взгляд кажется подобным свойству

1

border

.

Однако у свойства

1

outline

есть существенное отличие, которое приобретает очень важное значение при создании разметки. Свойство

1

outline

может быть полезным в процессе создания разметки в качестве удобного средства диагностики.

Во время создания разметки можно визуально обозначить местоположение всех ее частей.

Например, таким образом:

div {outline: 1px solid #ff0000}

Вы можете решить, что точно так можно сделать и с помощью свойства

1

border

, но в действительности это не так. Причина заключается в том, что границы (

1

border

) нарушают разметку. А свойство

1

outline

не нарушает ее.

Вот что я имею ввиду: предположим, у вас есть три колонки

1

div

‘ов, которые должны располагаться внутри контейнера-родителя

1

div

с шириной 960px. (Если вам не нравятся пиксели, то можете применить для этой же цели

1

em

, проценты или любую другую единицу измерения).

Для всех трех

1

div

‘ов-потомков устанавливаем правила

1	float: left; width: 33.33%

и попытаемся визуально обозначить местоположение в разметке каждого из блоков.

Если ко всем трем блокам вы добавите свойство

1	border: 1px solid #ff0000;

, то последний из этих трех опустится вниз и расположиться под двумя первыми:

Это произошло потому, что каждый из трех блоков

1

div

имеет ширину 320px; помимо этого справа и слева к каждому блоку добавлена граница толщиной в

1

1px

, что делает ширину блока равной, как минимум,

1

322px

.

Умножте это значение ширины на 3 (количество блоков-колонок) и в результате получиться общая ширина 966px, что явно больше ширины блока-родителя 960px. Результат для браузера - сместить последний блок вниз!

Именно по этой причине свойство

1

border

нарушает разметку. Свойство

1

outline

, с другой стороны, не нарушает ее. С помощью него вокруг элементов рисуется линия; к примеру, в нашем случае все три блока

1

div

со свойством

1	outline: 1px solid #ff0000;

разместятся друг рядом с другом внутри блока-родителя.

Не имеет значения, какой толщины вы сделаете

1

outline

, блоки

1

div

никогда не сдвинуться и не нарушат разметку (это касается не только блока

1

div

, а любого элемента страницы). Линии сделают перекрытие друг друга, как показано на рисунке ниже:

Сразу становится ясно преимущество использования

1

outline

при создании разметки. Если в процессе ее создания вам кажется, что что-то идет не так, вы легко можете “нарисовать” границы интересующего вас элемента, не опасаясь при этом нарушить разметку.

Другое отличие

1

outline

от

1

border

заключается в том, что

1

outline

“рисуется” обязательно вокруг всего элемента, по всем четырем его сторонам.

Другими словами, вы не можете просто создать левый

1

outline

или же правый

1

outline

, как вы это обычно делаете при работе с границами

1

border

. Может существовать только граница

1

outline

вокруг всех четырех сторон элемента, и не может быть по другому.

По этой же причине невозможно изменять цвет, ширину или стиль какой-либо одной из сторон элемента. Если необходимо создать границу

1	outline: 2px dashed yellow

, то она будет создана таковой вокруг всех сторон элемента.

Заметьте, что элемент может одновременно иметь оба свойства

1

border

и

1

outline

. В этом случае граница

1

outline

будет отрисована браузером снаружи от границы

1

border

, так что внутренний край

1

outline

будет соприкасаться с внешним краем границы

1

border

:

Если элемент также имеет

1

margin

, то эти поля рисуются вокруг границ

1

outline

; но при этом

1

outline

не изменяют поля

1

margin

и не замещают их.

Автор статьи: Eric Meyer - “Smashing CSS Professional Techniques for Modern Layout”

---