Соглашение по именованию
Имя БЭМ-сущности уникально. Во всех технологиях (CSS, JavaScript, HTML) одна и та же БЭМ-сущность всегда называется одинаково. Основная идея соглашения по именованию — вложить смысл в имена и сделать их максимально информативными для разработчика.
Можно сравнить одно и тоже имя CSS-селектора, написанное разными способами:
- menuitemvisible
- menu-item-visible
- menuItemVisible
Чтобы понять смысл первого имени, нужно вчитаться в каждое слово. В последних двух примерах имя явно разделяется на логические части. Но ни одно из имен пока не помогает точно определить, что menu — это блок, item — элемент, а visible — модификатор. Чтобы имена сущностей были однозначными и понятными, в БЭМ были разработаны правила формирования имен БЭМ-сущностей.
Правила формирования имен
- Имена записываются латиницей в нижнем регистре.
- Для разделения слов в именах используется дефис ( — ).
- Имя блока задает пространство имен для его элементов и модификаторов.
- Имя элемента отделяется от имени блока двумя подчеркиваниями ( __ ).
- Имя модификатора отделяется от имени блока или элемента одним подчеркиванием ( _ ).
- Значение модификатора отделяется от имени модификатора одним подчеркиванием ( _ ).
- Значение булевых модификаторов в имени не указывается.
Важно! В методологии БЭМ не существует элементов элементов. Правила именования запрещают создавать элементы элементов, но в DOM-дереве элементы можно вкладывать друг в друга.
Примеры
В HTML БЭМ-сущности представлены атрибутом class . В БЭМ во всех технологиях происходит обращение к классу:
Примеры правил формирования имен приведены на CSS.
Имя блока
div class="menu">. div>
.menu < color: red; >
Имя элемента
Важно! Имена одинаковых элементов одного и того же блока совпадают. Например, все пункты в блоке меню называются menu__item .
div class="menu"> . span class="menu__item"> span> div>
.menu__item < color: red; >
Имя модификатора блока
menu_theme_islands
div class="menu menu_hidden">. div> div class="menu menu_theme_islands">. div>
.menu_hidden < display: none; > .menu_theme_islands < color: green; >
Имя модификатора элемента
menu__item_type_radio
div class="menu"> . span class="menu__item menu__item_visible menu__item_type_radio">. span> div>
.menu__item_visible <> .menu__item_type_radio < color: blue; >
Альтернативные схемы именования
Описанные выше правила формирования имен — это классическая схема именования БЭМ-сущностей. Все инструменты БЭМ по умолчанию настроены на классическую схему.
Существуют альтернативные схемы именования, которые активно используются в БЭМ-сообществе. Чтобы во всех технологиях применять одинаковые имена, созданные по альтернативным схемам, используйте инструмент bem-naming. По умолчанию bem-naming содержит настройки соглашения по именованию, предложенного методологией, но позволяет добавлять правила для применения альтернативных схем.
Стиль Two Dashes
- Имена записываются латиницей в нижнем регистре.
- Для разделения слов в именах БЭМ-сущностей используется дефис ( — ).
- Имя элемента отделяется от имени блока двумя подчеркиваниями ( __ ).
- Булевые модификаторы отделяются от имения блока или элемента двумя дефисами ( — ).
- Значение модификатора отделяется от его имени двумя дефисами ( — ).
Важно! Двойной дефис внутри комментария ( — ) может вызвать ошибки при валидации HTML-документа.
Стиль CamelCase
- Имена записываются латиницей.
- Каждое слово внутри имени пишется с заглавной буквы.
- Разделители элементов и модификаторов совпадают с классической схемой.
Стиль React
- Имена записываются латиницей.
- Имена блоков и элементов пишутся с заглавной буквы. Имена модификаторов — со строчной.
- Каждое слово внутри имени пишется с заглавной буквы.
- Имя элемента отделяется от имени блока одним дефисом ( — ).
- Разделители имени и значения модификаторов совпадают с классической схемой.
Стиль No-namespace
- Имена записываются латиницей.
- Имя блока или элемента перед модификатором не указывается.
Такая схема именования ограничивает использование миксов, так как не дает возможности определить, к какому блоку или элементу относится модификатор.
Ваша схема именования
Можно создать собственную схему именования БЭМ-сущностей. Важно, чтобы разделители в новой схеме давали возможность на программном уровне отделять блоки от элементов и модификаторов.
Как правильно называть блоки div?
Может вопрос и глупый но все же. Допустим я открыл макет в psd начинаю разделять его на блоки так как не знаю англ языка начинается бред типа block 1 и.т.д. Но я знаю что это не правильно будет говнокод. Поэтому хотел бы узнать как вы называете блоки
- Вопрос задан более трёх лет назад
- 7011 просмотров
1 комментарий
Простой 1 комментарий
Алекс Глебов @SkiperX Куратор тега CSS
да да
суровые имена программистов)
у блока есть смысл все равно
преимущества, клиенты, отзывы и тд
берешь гугл переводчик и переводишь
у элементов item link group cart и тд
слов которыми обзывают элементы не так много
бем помогает не повторяться, добавляя имя блока
если мало названия блока, можно привязать к названию страницы еще, main или inner
тогда точно хватит
Подскажите как правильно называть блоки при верстке, есть ли какие то стандарты?
1) Какие существуют компоненты (почва, платформы, API, SDK и т.п.)?! 2. Как правильно называть это ПО?!
Сразу 2 вoпpoca: 1) Какие существуют в наше время ещё компоненты, кроме указанных: • Microsoft .
Как правильно называть интерфейсы в Java
Здравствуйте! Как правильно именуются интерфейсы в Java. Допустим у меня есть класс Fish.
Как правильно называть некоторые термины?
Читаю статьи на разных сайтах по HTML 5 и не много запуталась. Например на Хабре font — называют.
Регистрация: 24.03.2016
Сообщений: 14
Denis Landar,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197
Основные .wrapper - /*обвертка сайта*/ .hedader - /*верхняя часть сайта*/ .sidebar - /*сайдбар (левая или правая часть сайта)*/ .content - /*тело сайта (центральная часть)*/ .footer - /*нижнаяя часть сайта*/ Название блока (обвертка) .bl .block .box .wrap .inner .container .main Секции блока .head, .header - /*верхняя часть блока например заголовок*/ .cnt, .content, .body - /*тело блока например текс с картинкой*/ .footer - /*нижняя часть блока к примеру дата добавления, категория и т.д.*/ Колонки .column, .col - /*колонка*/ Списки .list .item Позиционные классы .top /* элемент сверху**/ .left /* элемент слева*float:left */ .right /* элемент справа*float:right */ .bottom /* элемент внизу**/ .center /* элемент отцвентрирован* margin:0 auto; */ .fixed - /*фиксированный элемент postion:fixed */ Переходы .next - /*следующий*/ .prev - /*предыдущий*/ .last - /*последний*/ .first - /*первый*/ .back - /*назад*/ .ahead - /*вперед*/ Чисельные .one .thwo .three .four .five Размеры .xs, .tiny - /*очень маленький*/ .s, .small - /*маленький*/ .md, .medium - /*средний */ .lg, .large, .big - /*большой */ .xl, .extra-large - /*очень большой*/ Цвета .danger - /*цвет опасности*/ .default - /*стандартный цвет*/ .warning, .error - /*цве ошибки*/ .success - /*цвет успеха (к примеру верно введн код подтвержления)*/ .primary - /*основной цвет */ Кнопки .button, .btn - /*кнопка*/ .loading - /*загрузка*/ .close - /*закрыть*/ .open - /*открыть*/ .touch - /*клик*/ .edit - /*редактировать*/ .more - /*больше*/ .remove - /*удалить*/ .logout - /*выход*/ .select - /*выбрать*/ .divider - /*выпадающийся список меню*/ .caret, .arrow - /*стрелочка*/ .up - /* Вверх**/ .down - /* Вниз**/ .delete - /* удалить**/ .reply - /*ответить*/ Персона .profile - /*профиль*/ .person - /*человек*/ .ava, .avatar - /*аватарка, картинка*/ .name - /*имя*/ .description - /*описание*/ .address - /*адресс*/ .nickname - /*ник*/ .birthday - /*дата рождения*/ .sex - /*пол*/ .author - /* автор**/ Заголовки .title - /*заголовок*/ .short-title - /*скороченный заголовок*/ .full-title - /*полный заголовок*/ Ссылки .link - /*ссылка*/ Текст .text, .txt, .paragraph - /*текст*/ .info, .information - /*информация*/ Картинки .image, .img - /*картинка*/ .icon, .ic - /*иконка*/ .bg - /*фоновая картинки или цвет*/ Формы .search, .form-search - /*поиск по сайту*/ .input - /*текстовый элемент*/ .form - /*форма*/ .form-group - /*группа элементов формы*/ .help-block - /*текст подсказки*/ .label - /*название элемента формы*/ Катагории .type - /*тип*/ .cat, .category - /*катигория*/ .subcat, .subcategory - /*подкатегория*/ .section - /*раздел*/ .subsection - /*подраздел*/ Видео .video .play - /*пуск*/ .stop - /*стоп*/ .pause - /*пауза*/ Социальные сети .social - /* социальные сети**/ .vk - /*вконтакте*/ .fb - /*фейсбук*/ .twit - /*твиттер*/ .inst - /*инстаграм */ Активные классы .none - /*скрытый элемент*/ .disabled - /*заблокированный*/ .active, .current - /*активный */ .selected - /*выбраный*/ .visible - /*видный элемент*/ .focus - /*нажатый*/ Временные классы .time - /*время*/ .date - /*дата*/ .day - /*день*/ .month - /*месяц*/ .year - /*год*/ Очистка .clear, .clearfix, .clr - /*очистка*/ Разделители .separator, .divide - /*разделитель вертикальный для слов */ .br, .line - /*разделитель горизонтальный для блоков*/ Остоньлые названия .logo - /*лого сайта*/ .new - /*новинка*/ .sale - /*распродажа*/ .feedback - /*обратная связь*/ .support - /*помощь */ .group - /*группа*/ .module - /*модуль*/ .posters - /*пост*/ .form - /*форма*/ .tabs - /*вкладки*/ .slider - /*слайдер*/ .news - /*новости*/ .table - /*таблица*/ .full - /*полный*/ .breadcrumbs - /*Хлебные крошки*/ .pagination, .pager - /*Нумерация страниц*/ .navbar, .nav, .menu, .navigation - /*Навигация (меню)*/ .dropdown - /*выпадающейся меню */ .comment - /*комментарий*/ .subscription - /* Подписка**/ .special - /* особенный элемент**/ .standard - /* стандартный элемент**/ .screens - /* Скрины**/ .rate - /* рейтинг**/ .online - /* онлайн**/ .panel - /* панель**/ .popup - /* попап**/ .version - /* версия**/ .page - /* страница**/ .banners - /* баннер**/ .map - /* Карта**/ .more - /*еще, подробнее*/ .tags - /* тег**/ .price - /* цена**/
Блочная модель
Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задается свойством width , а высота через height ; вокруг контента идут поля ( padding ), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы ( border ) и завершают блок отступы ( margin ), невидимое пустое пространство от внешнего края границ. Порядок влияния этих свойств на блок четко определён и не может быть нарушен. На рис. 3.1 показан блок в виде набора этих свойств.
Рис. 3.1. Свойства, формирующие блочный элемент
Для наглядности свойства блока можно представить в виде матрёшек (рис. 3.2). Любую маленькую матрёшку можно вставить в более крупную матрёшку, но никак не наоборот.
Рис. 3.2. Матрёшки
На деле ни одно из этих свойств не является обязательным, в том числе и контент, поэтому вы можете формировать любые блоки, содержащие комбинации свойств padding , border и margin или вообще обойтись без них.
Поля
Полем будем называть расстояние от внутреннего края границы или края блока до воображаемого прямоугольника, ограничивающего содержимое блока. Из-за того, что значения полей могут различаться на каждой стороне, применяют выражения «верхнее поле» или «поле сверху», и им подобные для других сторон. Обозначение «поля» следует понимать как одинаковое значение полей для всех сторон. Основное предназначение полей — создать пустое пространство вокруг содержимого блочного элемента, например текста, чтобы он не прилегал плотно к краю элемента. Использование полей повышает читабельность текста и улучшает внешний вид страницы. В примере 3.1 показано использование полей для оформления текста.
Пример 3.1.Использование свойства padding
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Поля
Результат примера показан на рис. 3.3.

Рис. 3.3. Поля вокруг текста
Значения полей не могут быть отрицательными.
Границы
Границы это линии вокруг полей элемента на одной, двух, трёх или всех четырёх его сторонах. У каждой линии есть толщина, стиль и цвет. Для создания рамки применяется универсальное свойство border одновременно задающее все эти параметры, а для создания линий на отдельных сторонах элемента можно воспользоваться свойствами border-left , border-top , border-right и border-bottom , соответственно устанавливающих границу слева, сверху, справа и снизу. В примере 3.2 показано добавление линии слева от элемента.
Пример 3.2. Красная пунктирная линия
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Линия P.line
Результат данного примера показан на рис. 3.4.

Рис. 3.4. Линия возле текста
Расстояние от линии до текста регулируется значением padding .
Отступы
Отступом будем называть пустое пространство от внешнего края границы, полей или содержимого блока. Как уже упоминалось, границы с полями не обязательны и могут отсутствовать, так что способ формирования отступов зависит от ситуации. Как и в случае с полями, применяют выражения «верхний отступ» или «отступ сверху», и им подобные для других сторон. Обозначение «отступы» следует понимать как одинаковое значение отступов для всех сторон.
Для отступов характерны следующие особенности.
- Отступы прозрачны, на них не распространяется цвет фона или фоновая картинка, заданная для блока. Однако если фон установлен у родительского элемента, он будет заметен и на отступах.
- Отступы в отличие от полей могут принимать отрицательное значение, это приводит к сдвигу всего блока в указанную сторону. Так, если задано margin-left : -10px , это сдвинет блок на десять пикселов влево.
- Для отступов характерно явление под названием «схлопывание», когда отступы у близлежащих элементов не суммируются, а объединяются меж собой.
- Отступы, заданные в процентах, вычисляются от ширины контента блока. Это касается как вертикальных, так и горизонтальных отступов.
В примере 3.3 показано схлопывание отступов и их прозрачность.
Пример 3.3. Использование отступов
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Отступы .layer1, .layer2
Результат данного примера показан на рис. 3.5. Обратите внимание, что расстояние между блоками равно 20 пикселов, а не 40, которые получаются суммированием верхнего и нижнего отступа у блоков. Это происходит за счёт эффекта схлопывания, при котором близлежащие отступы объединяются.

Рис. 3.5. Отступы в элементе
На рисунке хорошо видно, что цвет, задаваемый через свойство background , не выходит за пределы границы элемента и не оказывает влияние на отступы.
Ширина блока
Ширина блока это комплексная величина и складывается из нескольких значений свойств:
- width — ширина контента, т.е. содержимого блока;
- padding-left и padding-right — поле слева и справа от контента;
- border-left и border-right — толщина границы слева и справа;
- margin-left и margin-right — отступ слева и справа.
Как уже упоминалось, какие-то свойства могут отсутствовать и в этом случае на ширину не оказывают влияние. Общая ширина показана на рис. 3.6 в виде чёрной пунктирной линии.

Рис. 3.6. Ширина блока
Если значение width не задано, то оно по умолчанию устанавливается как auto . В этом случае ширина блока будет занимать всю доступную ширину при сохранении значений полей, границ и отступов. Под доступной шириной в данном случае подразумевается ширина контента у родительского блока, а если родителя нет, то ширина контента браузера.
Допустим, для слоя написан следующий стиль.
width: 300px; /* Ширина контента */ margin: 7px; /* Значение отступов */ border: 4px solid black; /* Параметры границы */ padding: 10px; /* Поля вокруг текста */
Ширина блока согласно этой записи будет равна 342 пиксела, эта величина получается складыванием значения ширины контента плюс отступ слева, граница слева и поле слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.
Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342
Надо отметить, что блочная модель с формированием ширины несет в себе кучу неудобств. Постоянно приходится заниматься вычислениями, когда требуется задать определенную ширину блока. Также начинаются проблемы при сочетании разных единиц измерения, в частности, процентов и пикселов. Предположим, что ширина контента задана как 90%, если сюда приплюсовать поля и границы, заданные в пикселах, то нельзя вычислить суммарную ширину блока, поскольку проценты напрямую в пикселы не переводятся (в CSS3 так суммировать можно, только поддерживается эта возможность далеко не всеми браузерами). В итоге может получиться так, что общая ширина блока превысит ширину веб-страницы, что приведёт к появлению горизонтальной полосы прокрутки. Выходов из подобной ситуации два — поменять алгоритм блочной модели и воспользоваться вложенными слоями.
Алгоритм блочной модели
Как уже упоминалось, ширина блока формируется из ширины контента и значений полей, границ и отступов. В браузере Internet Explorer в режиме совместимости (иными словами, когда не указан доктайп) алгоритм меняется автоматически и ширина всего блока устанавливается равной width . Остальные браузеры так просто не меняют алгоритм, к тому же вы знаете, что режим совместимости это зло. В CSS3 есть замечательное свойство box-sizing , которое нам и пригодится. При значении border-box ширина начинает включать поля и границы, но не отступы. Таким образом, подключая box-sizing со значением border-box к своему стилю, мы можем задавать ширину в процентах и спокойно указывать border и padding , не боясь, что изменится ширина блока. К сожалению, с этим свойством связана небольшая проблема, как обычно относящаяся к браузерам — не все браузеры его понимают. Радует, что браузеры хотя бы поддерживают специфические для каждого браузера свойства. В табл. 3.1 приведена поддержка браузерами.
Табл. 3.1. Поддержка браузерами свойства box-sizing
Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
8.0+
2.0+
7.0+
3.0+
1.0+
Свойство
box-sizing
-webkit-box-sizing
box-sizing
-webkit-box-sizing
-moz-box-sizing
Как видно из таблицы, в свойствах разброд и шатание, поэтому придется делать гибрид и указывать все три свойства одновременно (пример 3.4).
Пример 3.4. Ширина блока
XHTML 1.0 CSS 3 IE 7 IE 8+ Cr Op Sa Fx
Ширина блока Ширина блока 100%
Данный пример будет работать во всех браузерах, указанных в табл. 3.1, однако невалиден в CSS3 из-за применения нестандартных свойств начинающихся на -moz и -webkit. Ширина блока составляет 100% с учетом значений padding . Без свойства box-sizing в браузере появится горизонтальная полоса прокрутки.
Вложенные слои
Использование свойства box-sizing всем хорошо, кроме того, что не работает в старых версиях IE. Если вы верстаете сайт с учетом IE7 и IE6, вам подойдёт старый проверенный метод с вложением слоев. Идея простая — для внешнего блочного элемента задаётся только необходимая ширина, а для вложенного блока всё остальное — поля, границы и отступы. Поскольку по умолчанию ширина блока равна доступной ширине родителя, получится, что блоки в каком-то смысле накладываются друг на друга, при этом фактическая ширина такого комбинированного элемента будет чётко задана. В примере 3.5 показано использование вложенных слоев.
Пример 3.5. Вложенные слои
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Ширина блока .wrap < width: 50%; /* Ширина */ >.wrap div Ширина слоя 100%
Результат данного примера показан на рис. 3.7.

Рис. 3.7. Ширина блока в процентах
Преимуществом вложенных слоев является использование отступов ( box-sizing их не учитывает), универсальность метода, также то, что фон по желанию можно добавлять к одному или другому слою. Тем самым несколько меняется внешний вид элементов, это особенно актуально при включении фоновых рисунков. Из недостатков метода можно отметить добавление дополнительного блока, который усложняет структуру кода, особенно при частом применении метода. Но это можно считать мелочью по сравнению с преимуществами.
Высота блока
На высоту блока действуют те же правила, что и на ширину. А именно, высота складывается из значений высоты контента ( height ), полей ( padding ), границ ( border ) и отступов ( margin ). Если свойство height не указано, то оно считается как auto , в этом случае высота контента вычисляется автоматически на основе содержимого. На рис. 3.8 показаны свойства, дающие итоговую высоту, которая обозначена чёрной пунктирной линией.

Рис. 3.8. Высота блока
Вместе с тем, несмотря на схожесть принципов построения ширины и высоты, у них есть существенные различия. Это касается того случая, когда значение width и height не указано, тогда по умолчанию оно принимается как auto . Для ширины блока — это максимально доступная ширина контента, а для высоты блока — это высота контента. Также для ширины блока известна ширина родителя, даже если она не указана явно. Это позволяет устанавливать значение width в процентах. Использование же процентов для height ни к чему не приведёт, потому что высота родителя не вычисляется и её надо указывать. В примере 3.6 показано, как задать высоту блока в процентах.
Пример 3.6. Высота блока
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Высота блока Высота слоя 100%
Результат данного примера показан на рис. 3.9.

Рис. 3.9. Высота блока в процентах
Для тега в примере родителем выступает тег , поэтому для него устанавливаем значение height равным 100%. В то же время на действуют те же правила, что и на , поэтому величина в процентах будет вычисляться не от высоты страницы, а от высоты контента. Так что для родителя , которым является тег , также требуется поставить значение height равным 100%. Только в этом случае высота блока в процентах будет зависеть от высоты страницы.
Поскольку на высоту влияет значение полей, границ и отступов, в примере появится вертикальная полоса прокрутки. Избавиться от этого влияния можно теми же методами, что и для ширины, а именно, использовать свойство box-sizing , либо воспользоваться вложенными слоями.
С высотой связана ещё одна особенность — при превышении содержимого блока его размеров при заданной высоте, содержимое начинается отображаться поверх блока (рис. 3.10).

Рис. 3.10. Превышение размеров блока
Код, приводящий к подобному результату, приведен в примере 3.7.
Пример 3.7. Превышение размеров блока
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Высота блока div Лев ревет только в том случае, когда сообщает, что территория принадлежит ему или провозглашает себя царем природы.
Охотничий участок льва может иметь длину и ширину до тридцати километров.
Чтобы избежать подобных неприятностей, высоту контента лучше не задавать, тогда высота блока будет вычисляться автоматически. Впрочем, бывают случаи, когда высота должна быть чётко указана, тогда рекомендуется к стилю добавить свойство overflow со значением auto или hidden . Результат у них разный, auto добавляет полосы прокрутки автоматически, когда они требуются (рис. 11а), hidden скрывает всё, что не помещается в заданные размеры (рис. 11б).

а. Значение auto

б. Значение hidden
Рис. 11. Использование свойства overflow
Фон
Если задать одновременно цвет фона и пунктирную границу блока, то становится заметно, что граница проходит внутри цветной области. Правда в разных браузерах наблюдается разночтение, в частности Internet Explorer до версии 7.0 включительно содержит ошибку, при которой фон выводится по внутреннему краю границы (рис. 12в). Начиная с версии 8.0 эта ошибка исправлена, и фон выводится по стандартам (рис. 12г). Браузеры Opera (рис. 12а), Firefox (12б), Safari и Chrome (рис. 12д) фон выводят правильно. Небольшие различия наблюдаются при отображении пунктирной рамки, но они не влияют на блочную модель.





д. Safari, Chrome
Рис. 12. Отображение фона в браузере
В примере 3.8 показано, как создать код для получения подобной границы.
Пример 3.8. Фон и граница
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Рамка
Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид блока в браузерах будет практически одинаковым.