Псевдоэлементы — специальные селекторы, воздействующие на разные части документа. Их объявление начинается с двойного двоеточия (::), впрочем, в целях обратной совместимости многие браузеры поддерживают синтаксис с одним двоеточием. Самые распространенные псевдоэлементы — это ::before и ::after для вставки контента в начало или конец элемента (см. приложение А для получения дополнительных сведений).
Такая разметка часто используется для центрирования контента страницы. Вы можете добиться этого, расположив контент внутри двух вложенных контейнеров и настроив поля внутреннего контейнера так, чтобы он не выходил за пределы внешнего (рис. 4.5). Веб-разработчик Брэд Вестфол (Brad Westfall) называет такой подход шаблоном двойного контейнера.
Применение свойства overflow: auto (или любого значения, отличного от visible) к контейнеру предотвращает схлопывание полей внутри него с полями контента вне контейнера. Это основное решение.
• Добавление границ или отступов между двумя полями предотвращает схлопывание.
• Поля не будут схлопываться вне плавающего контейнера, строчного блока или имеющего абсолютное или фиксированное позиционирование.
• В случае flexbox-верстки поля не будут схлопываться между элементами, являющимися частью flex-макета. Это относится и к CSS-сеткам (см. главу 6).
• Элементы со значениями table-cell не имеют полей, поэтому они не будут схлопываться. Это относится также к элементам table-row и большинству других типов отображения таблиц. Исключения — элементы table, table-inline и table-caption.
Точно так же max-height позволяет варьировать размер элемента вплоть до указанного. Если он достигнут, элемент не становится выше и будет переполнен контентом. Аналогичные свойства min-width и max-width ограничивают ширину элемента.
Вместо установки определенной высоты укажите минимальную с помощью свойства min-height. Это означает, что элемент будет как минимум выше, чем вы укажете, и, если контент не умещается, браузер позволит элементу расшириться, чтобы предотвратить переполнение.
