Wrapper css что это

Для чего теги «оборачивают» Wrapper’ом?

Для чего теги «оборачивают» Wrapper’ом и почему у Wrappera часто ставят position:relative ? Что вообще дает использование wrapper’а?

Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
задан 17 апр 2016 в 18:36
41 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака

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

17 апр 2016 в 18:41

@Grundy, видимо, идентификатор #wrapper имеется в виду, и участник не знает, что можно задавать любые значения атрибутом id и class , а wrapper приводится только для примера. Berty, для чего wrapper , например, как в этом примере Вы хотели узнать? Спасибо.

17 апр 2016 в 18:59
@Саша Черных,я тут первый раз,так что,извиняюсь за неточную формулировку)Да,я бы хотел узнать.
17 апр 2016 в 19:29
Когда понадобится, сам поймёшь.
27 фев 2018 в 22:39

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Это может быть связано с position:absolute для вложенного элемента. Дело в том, что без обёртки с position:relative координаты такого элемента будут отсчитываться относительно всего документа, а с обёрткой — относительно обёрточного элемента.

Отслеживать
ответ дан 17 апр 2016 в 18:58
6,894 2 2 золотых знака 26 26 серебряных знаков 56 56 бронзовых знаков

Это всего лишь контейнер для удобства, заключая блоки в обертку проще центрировать, задавать общую ширину. и т.д. Релейтив ставят если собираются абсолютно позиционировать внутренние блоки.

Отслеживать
ответ дан 17 апр 2016 в 19:36
1,087 3 3 золотых знака 15 15 серебряных знаков 40 40 бронзовых знаков

В целом, wrapper используют для удобства позиционирования. Самому wrapper , присваивают минимум свойств.

А иногда вообще оставляют его без них. Почему просто не оставлять див без класса? Во первых, противоречит некоторым методологиям (например БЭМ). Во вторых, слово «wrapper» переводится как «обертка» и дает понять, тем кто будет работать с кодом после вас, зачем этот div нужен (при беглом просмотре). Также, он может послужить прослойкой для функционирования различных скриптов.

CSS для новичков: практическое занятие

Умение правильно оформлять CSS код важно для каждого веб дизайнера. Этот урок рассчитан на новичков, которые делают только первые шаги.

Вступление

При работе с CSS необходимо быть предельно внимательным. При написании кода следует соблюдать предельную концентрацию.

В данном уроке будет показан пример, как создать простую HTML страницу используя блочную верстку (без использования таблиц). А также научимся выносить стили в отдельную таблицу стилей.

Шаг №1 — Разметка и использование тегов

Разметка HTML всегда идет перед стилями. Нет смысла приступать к CSS без полностью готового HTML.

HTML — гипертекстовый язык разметки, иными словами HTML описывает структуру текстовой информации страницы. Прежде чем мы начнем применять стили CSS, нам необходимо научиться применять элементы структуры.

При строительстве разметки мы используем «теги», которые окружены угловыми скобками. Теги используются для определения чего-либо на странице. CSS применяется позже для определения места (в браузере) вывода содержания того или иного тега.

Самыми простыми тегами на странице являются:

Больше всего тегов и контента используется внутри тега .

Очень важный тег для разделения и определения структуры — тег . Используя данный тег, можно разделить содержание на ячейки. Внутри данного тега Вы можете использовать и прочие теги для определения контента (например, ссылки, текст, изображения), которые потом можно красиво оформить с помощью CSS.

Используйте любой редактор изображений для того, чтобы нарисовать следующий эскиз:

Код для данного шаблона должен выглядеть так:

Как Вы видите, у тегов div есть ID. Это понадобится нам для оформления каждой ячейки. ID используется для маркировки тега и придания ему уникального стиля. В то время как “class” используется для повторяющихся элементов дизайна.

Также, в примере используется еще один div “wrapper”, которые как бы «обертывает» все остальные теги. Это нам пригодится позже для позиционирования нашей странички.

Шаг №2 — Ссылка на таблицу стилей

В таблице стилей мы определяем элементы дизайна страницы. Можно создать как внутреннюю таблицу стилей, так и внешнюю. В данном уроке будет использована внешняя.

Если Вы просмотрите Вашу страницу в браузере сейчас — ничего не появится. Все потому что мы не придали нашим тегам никакого цвета и формы. И поскольку наш CSS будет внешним, первым делом Вам необходимо убедиться в том, что на странице есть ссылка на таблицу стилей.

Добавьте следующий код между :

Шаг №3 — Создание CSS

Синтаксис CSS состоит из селектора, свойства и значения. Селектор — это тег, который необходимо оформить в дизайне, свойство — тип атрибута, который Вы хотите добавить, значение — количественное измерение свойства.

Селектор, кроме тега body, записывается в CSS начиная с “#” или “.”. “#” определяет ID, а «.» (точка) определяет class селектора. Внутри селектора может находиться множество свойств и все они должны быть обрамлены < >.

#selector property:value; 
property:value; 
property:value; 
>
Нам необходимо оформить следующие теги с помощью 
CSS: 
* body 
* wrapper 
* header 
* navigation 
* menu 
* content 
* footer

Свойства и возможные значение в CSS:

Свойство «background» (фоновое изображение) может задавать изображение или цвет, или и то и другое. Для показа изображения, значение должно состоять из пути к изображению. Для определения цвета используется шестнадцатеричный код.

Свойство «color» используется для определения цвета селектора. Значения записываются в виде шестнадцатеричного кода (пример: #FFFFFF для белого).

Свойство «font-family» позволяет определить шрифт, который будет использоваться. Нормой является включение как минимум 3-х типов шрифтов. Это делается на случай, если браузер не может отобразить первый шрифт, будет использоваться второй и т.д. (пример: Trebuchet MS, Arial, Times New Roman)

Свойство «font-size» определяет размер шрифта и имеет значение в пикселях.

Свойство «margin» используется для определения позиции селектора. Значения задают расстояние сторон селектора до края окна браузера в следующем порядке: top, left, bottom, right. Если нам необходимо разместить страницу по центру, мы пишем «0px auto 0px». Указание всех четырех сторон не является обязательным.

Свойство «width» задает желаемую ширину в пикселях любого селектора.

Свойство «height» — высота в пикселях.

Свойство «float» позволяет нам позиционировать элементы внутри селекторов, в большинстве случаев справа или слева.

Для создания CSS файла откройте свой любимый текстовый редактор и сохраните новый документ как style.css в папке с страницами сайта. Добавьте следующий код:

body background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px; 
>
#wrapper background: #FFFFFF; 
margin: 60px auto; 
width: 900px; 
height: 1024px; 
>
#header background: #838283; 
height: 200px; 
width: 900px; 
>
#navigation background: #a2a2a2; 
width: 900px; 
height: 20px; 
>
#menu background: #333333; 
float: left; 
width: 200px; 
height: 624px; 
>
#content background: #d2d0d2; 
width: 900px; 
height: 624px; 
>
#footer background: #838283; 
height: 180px; 
width: 900px; 
>

Заключение

Вы прошли школу молодого бойца CSS и оформили все селекторы с помощью вышеуказанных свойств.

Надеюсь, урок Вам понравился! Жду отзывов и пожеланий.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.line25.com
Перевел: Максим Шкурупий
Урок создан: 13 Августа 2009
Просмотров: 105303
Правила перепечатки

5 последних уроков рубрики «CSS»

• 

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

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

Как стилизовать wrapper в CSS

Контент сайта должен находиться в элементе, имеющем такую ширину, чтобы его было легко читать. Для достижения этого мы можем использовать то, что называется wrapper, обёртка или контейнер. Есть несколько способов использования обёртки в CSS, и все они могут вызвать некоторые затруднения.

В этой статье я объясню вам всё, что нужно знать о контейнерах в CSS: как они работают и как их использовать. Обратите внимание, в статье я могу употреблять термины wrapper, обёртка и контейнер, но все они означают одно и то же.

Готовы? Давайте разбираться!

Кратко о контейнерах

Когда вы слышите слово обёртка или контейнер – это буквально означает, что группа элементов обёрнута другим элементом или содержится в нём. Не используя дополнительные объекты, мы можем добавить обёртку к элементу , как показано ниже.

body

Однако добавлять wrapper к элементу в современных условиях было бы не очень практично. Контейнер не позволяет дочерним элементам выходить за его границы. Посмотрите на следующую фигуру:

У нас есть боковые и центральные элементы, которые существуют внутри другого элемента, оборачивающего их. Конечно, у элемента wrapper есть своя ширина.

Без контейнера дочерние элементы соприкасались бы с границами экрана. Это выглядело бы довольно раздражающе для пользователя, особенно на большом экране.

Фигура, продемонстрированная выше, показывает, что элементы растягиваются, если их ничто не оборачивает. Пользователю не стоит видеть такую картину. Давайте объясню, почему .

Почему страница должна иметь обёртку

Использование контейнера на странице даёт много преимуществ, о которых вы, как дизайнер или разработчик, должны знать. Вот некоторые из них:

1. Контейнеры делают контент более читабельным. Без обёртки такой контент как текст или картинки может растянуться на полную ширину экрана. На маленьких экранах это может быть приемлемо, но на больших выглядит неприятно.
2. Обертки группируют элементы так, что становится легче настраивать расстояние между ними.
3. Без обертки было бы сложно разделить элементы дизайна на колонки.

Добавляем ширину

Первая вещь, о которой стоит подумать, создавая wrapper, – это его ширина. Насколько широким вы хотите его видеть? Это зависит от вашего дизайна. Как правило, чаще всего используется ширина контейнера в диапазоне 1000px – 1300px. Самый популярный фреймворк Bootstrap, например, использует ширину в 1170px.

.wrapper

Однако не рекомендуется использовать свойство width, так как из-за этого может появиться горизонтальная прокрутка экрана, если его размер меньше 1170px. Но вы можете от неё избавиться, добавив свойство max-width.

.wrapper

Это будет работать, но вы также можете убрать свойство width и использовать только max-width, как показано ниже:

.wrapper

Теперь, когда мы добавили контейнеру ширину, давайте расположим его в центре.

Центрирование контейнера

Чтобы разместить контейнер в центре, вы должны присвоить свойству margin значение auto с левой и правой стороны. Смотрите пример, приведенный ниже:

.wrapper

Согласно спецификации CSS, auto margin работает следующим образом:

Если свойствам margin-left и margin-right присвоено значение auto, то размер отступа с обеих сторон будет одинаковым. Это горизонтально центрирует объект, относительно краёв содержащего блока.

Я использовал параметр «margin: 0 auto», который сбрасывает значение margin сверху и снизу до нуля, а справа и слева устанавливает значение auto. Пользуясь этим способом, можно ожидать некоторых последствий, о которых я расскажу в этой статье чуть позже.

Пока что рекомендую установить значения margin вручную.

.wrapper

Добавляем padding слева и справа

Важно не забыть добавить padding с левой и правой стороны. Если размер окна просмотра меньше максимальной ширины контейнера, то края контейнера будут соприкасаться с границами окна просмотра.

.wrapper

Добавляя padding, мы можем быть уверены, что слева и справа будет отступ в 16px, даже если ширина окна просмотра меньше максимальной ширины контейнера.

Свойство padding действует как подстраховка, не допускающая прилегания границ контейнера к границам окна просмотра, в случае нехватки места.

Использование процентной ширины для контейнера

Я получил ответ об использовании процентной ширины (типа max-width: 90%) для контейнера, вместо добавления padding-left и padding-right.

В случае использования этого метода, ширина, равная 90% от окна просмотра, будет слишком крупной на больших экранах. Это можно исправить, используя медиа-запросы.

.wrapper < max-width: 90%; margin-left: auto; margin-right: auto; >/* Медиа-запрос для большого экрана */ @media (min-width: 1170px) < .wrapper < max-width: 1170px; >>

Применяя процентную ширину, мы совершаем дополнительный шаг. Можно легко избежать этот шаг, используя фиксированное значение ширины. Другое решение говорит, что мы можем совместить width: 90% со свойством max-width: 1170px.

.wrapper

Это довольно интересный подход, но я бы предпочел самостоятельно добавить padding, вместо того чтобы полагаться на процентную ширину.

Способ отображения контейнера

Так как контейнер – это , он по умолчанию является блочным элементом. Вопрос в том, что делать, если мы хотим, чтобы он отображался в виде сетки, и всё его содержимое располагалось на сетке?

Что ж, я бы не рекомендовал так делать, потому что это противоречит концепции разделения обязанностей. «Обёртка» оборачивает другие элементы, и на этом всё. Если вам нужен контейнер с сеткой, добавьте в существующий контейнер элемент со свойством display: grid. Это более простой, понятный и доступный способ.

Так делать не рекомендуется, потому что использование элемента wrapper на другой странице может случайно повредить вашу вёрстку.

.wrapper

Лучшим решением будет следующее:

.featured-news

Заметьте, что я добавил отдельный элемент , чтобы он содержал контент. Пожалуйста, не обращайте внимания на классы и соглашения по именованию в этом примере. Мы можем найти гораздо лучшее решение, создав названия классов, которые могут быть использованы повторно на разных страницах сайта. Однако соглашения по именованию выходят за рамки этой статьи.

Добавляем отступ между контейнерами

Помните, я не рекомендовал использовать сокращенную версию кода для центрирования контейнера? Я говорю об этой версии:

.wrapper

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

.wrapper-variation < margin-top: 50px; >.wrapper

Свойство margin не будет работать для элемента wrapper-variation, потому что оно противоречит свойству margin: 0 auto. Сокращенное свойство будет отменять полное. Чтобы избежать подобной путаницы, в таких случаях рекомендуется использовать полные свойства.

Теперь давайте перейдём к созданию отступа. В каждом проекте я подготавливаю несколько служебных классов и использую их по необходимости. Обратите внимание на следующую модель:

Благодаря подобному подходу, сам контейнер остаётся без изменений, а отступ добавляется к дополнительным служебным классам в CSS. Теперь вы, наверное, спросите, зачем мне создавать несколько контейнеров на странице, если я могу создать один? В HTML-коде, приведенном выше, между двумя контейнерами есть элемент .

Здесь было бы полезно использовать декларацию !important, так как основная цель служебных классов в CSS, – сделать определенное свойство обязательным. Мы гарантируем это, добавляя !important.

Контейнер внутри полноэкранного раздела

Могут быть случаи, когда фон секции занимает 100% ширины окна просмотра, а внутри секции находится контейнер. Это похоже на то, что я показывал в предыдущем примере.

Структура HTML-страницы может выглядеть так:

Элемент занимает 100% ширины окна просмотра. Вы можете добавить к нему фоновый цвет или изображение. Внутри него контейнер не позволяет содержимому занять всю ширину окна просмотра.

На картинке, приведенной выше, у элемента есть фоновое изображение, которое занимает всю ширину окна просмотра. Контент внутри него ограничен шириной контейнера.

Нужен ли контейнер для первой секции?

Бывает по-разному. Давайте рассмотрим два наиболее часто используемых варианта дизайна первой секции (Hero Section).

В первом варианте содержимое располагается по центру и ограничивается определенной шириной.

Во втором варианте содержимое растягивается по ширине основного контейнера.

Чтобы лучше понять эти две модели, давайте разберёмся, как построить каждую из них.

Первая секция с контентом в центре

Возможно, вы не устоите перед соблазном разместить содержимое первой секции и центрировать всё без учета контейнера.

 
How to make bread at home
 
.
 
Sign up
 

Имея такой HTML-код, вы бы центрировали содержимое с помощью text-align.

.hero

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

Содержимое касается краёв

Так как padding справа и слева отсутствует, содержимое будет касаться краёв без каких-либо отступов. Это плохо для пользователя, ведь в подобной ситуации сложно просматривать и читать контент.

Слишком длинная строка на больших экранах

Будет очень сложно читать текст абзаца на больших экранах, так как строка слишком длинная. Сайт « Элементы типографического стиля, используемые в сети » рекомендует, чтобы в строке было 45-75 символов. Чем дальше от этого диапазона, тем сложнее будет читать текст, представленный на веб-странице.

Для устранения подобных проблем, можно использовать контейнер, который не даст строке текста стать слишком длинной и добавит отступ на мобильных устройствах.

 
 
How to make bread at home
 
.
 
Sign up
 
 

Я использовал класс hero__wrapper, так как этот контейнер может принадлежать только первой секции (Hero Section), поэтому его ширина может быть меньше ширины других контейнеров.

.hero__wrapper

Для центрирования содержимого вы можете применить любой метод, который хотите, в зависимости от варианта использования. В этом примере будет достаточно применить text-align: center, чтобы расположить контент в центре.

Контейнер стоит выравнивать по центру или по левой стороне?

Не знаю, есть ли однозначный ответ на этот вопрос, но я видел сайты, которые на экранах ноутбуков выравнивают контейнер по центру, а на экранах компьютеров – по левой стороне.

Сайт TechCrunch – хороший тому пример. Обратите внимание на то, что на больших экранах он выравнивается по левой стороне.

Лично я больше люблю сайты, которые выравниваются по центру и имеют симметричный отступ справа и слева. Возможно, поэтому я мало знаю о данной теме.

Используем переменные CSS для вариаций контейнеров

Редко случается так, что вам нужен контейнер только одного размера. Ширина контейнера может быть большой или маленькой, в зависимости от содержимого и варианта использования. Применяя переменные CSS, мы можем по-новому взглянуть на wrapper и сделать его максимально пластичным. Обратите внимание на следующее:

.wrapper

Возможно, вы заметили, что у функции var есть два значения: первое –
—wrapper-width, и второе – 1170px. Вторая переменная является резервной , то есть используется, если значение переменной —wrapper-width не установлено.

Что это значит? Это значит, что вы можете создать вариацию контейнера, установив свойство —wrapper-width, как показано ниже.

Таким образом, я создал вариацию контейнера:

• Без добавления новых классов;
• Не копируя и не вставляя стили;
• Более надежную и легко редактируемую с помощью DevTools.

Если вам не нравится использовать встроенные стили для изменения переменной CSS, вы можете вместо этого добавить новый класс. Смотрите пример, приведенный ниже:

.wrapper--small < --wrapper-width: 720px; /* это изменит ширину контейнера, установленную по умолчанию */ >

Используем свойство Display: Contents

Для начала я вас познакомлю с этим значением. Каждый элемент в CSS является блочным; и этот блок содержит контент, границы, внутренние и внешние отступы. Если вы примените display: contents, этот блок будет исключен из потока. Я могу представить это как удаление открывающего и закрывающего тэгов вокруг него.

.site-header__wrapper

Возможно, в примере, приведенном выше, вам понадобится растянуть header на всю ширину страницы, вместо того, чтобы вписывать его в контейнер.

.site-header__wrapper < display: contents; >.site-header

Таким способом элемент wrapper будет скрыт (в каком-то смысле). Теперь, когда мы применили display: flex к элементу site-header, объекты, принадлежавшие контейнеру, станут дочерними для элемента site-header.

Адаптивный фон, фиксированный контент

В своей книге о секретах CSS Лия Веру предложила интересную технику, которая может быть использована для секций с адаптивным фоном (фон, занимающий всю ширину окна просмотра), внутри которых есть контейнер. Давайте рассмотрим распространенный способ, позволяющий сделать это:

section < background-color: #ccc; >.wrapper

Принцип работы margin-left: auto и margin-right: auto заключается в вычислении половины ширины окна просмотра и вычитании из неё ширины контента. То же самое можно сделать, используя padding.

section

Мы ещё не закончили. На мобильных устройствах контент будет соприкасаться с границами экрана. Решить это можно следующим способом:

section < padding: 1rem; >@media (min-width: 1170px) < section < padding: 1rem calc(50% - 585px); >>

В качестве альтернативного решения можно использовать новую функцию CSS max(). Мы просто устанавливаем минимальный padding размером в 1rem, а вычисление 50% — 585px будет использовано в качестве другого значения.

section

Конец

Вот мы и стилизовали наш wrapper. У вас есть комментарий или предложение?

Лучший способ реализовать «обёртки» в CSS

Иногда первое, что мы пишем на странице — это элемент, оборачивающий всё остальное на странице. Термин «Обёртка» типичен для этого. Мы задаём ему класс, отвечающий за инкапсуляцию всех визуальных элементов на странице.

Я всегда боролся за то, чтобы найти лучший способ реализовать его. Я нашёл соответствующую тему на StackOverflow с более чем 250000 просмотров, что говорит о её огромной популярности. В этой статье я подытожу свои мысли.

Перед тем, как пойти дальше, сначала рассмотрим разницу между «обёрткой» (wrapper) и «контейнером» (container).

«Обёртка» против «Контейнера»

Я вижу разницу между элементом-обёрткой и элементом-контейнером.

В языках программирования слово «контейнер» обычно используется для структуры, содержащей более одного элемента. «Обёртка» же — это нечто, что оборачивается вокруг одного объекта, чтобы предоставить интерфейс к нему и расширить его функциональность.

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

Обёртка ассоциируется с , который содержит весь остальной HTML в документе. Уверен, что многие помнят то время, когда мы устанавливали для ширину 960px и центрировали основной контент. Обёртки так же были полезны, чтобы прижать футер.

Контейнер, напротив, обычно предполагает другой вид содержимого. То, которое иногда необходимо для реализации поведения или оформления множественных компонентов. Он служит задаче группировки семантических и визуальных элементов. Например, у бутстрапа есть «классы контейнера», которые содержат их систему сеток или другие различные компоненты.

Термины «Обёртка» и «Контейнер» также могут означать одно и то же в зависимости от разработчика и его целей. Могут быть и другие соглашения, так что лучший совет, как правило — делать так, как вам самим логичнее. Но помните, что наименование — одна из наиглавнейших фундаментальных вещей в практике разработчика. Система наименования делает код читабельнее и предсказуемее. Выбирайте тщательнее!

Вот пример общей обёртки страницы:

/** * 1. Центрируем содержимое. Да, это немножко вкусовщина. * 2. См. раздел «width против max-width» * 3. См. раздел «Дополнительные внутренние отступы» */ .wrapper < margin-right: auto; /* 1 */ margin-left: auto; /* 1 */ max-width: 960px; /* 2 */ padding-right: 10px; /* 3 */ padding-left: 10px; /* 3 */ >

width против max-width

После установки ширины блочному элементу он больше не сможет растягиваться на всю ширину своего контейнера (полезно для комфортной длины строк). Следовательно, элемент-обёртка займёт указанную ширину. Но если окно браузера Уже указанной ширины обёртки, то появится нежелательный горизонтальный скролл.

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

С точки зрения отзывчивости max-width лучший выбор!

Дополнительные внутренние отступы

Я видел, как многие разработчики забывали один граничный случай. Допустим, есть обёртка с max-width: 980px. Этот граничный случай проявляется при экране устройства 980px. Поэтому, её содержимое прилипнет точно к краям экрана, не оставляя «воздуха».

Эта проблема нехватки «воздуха»

Обычно нам нужны отступы по краям. Вот почему, когда мне нужна обёртка шириной 980px, я делаю так:

.wrapper < max-width: 960px; /* на 20px меньше, чтобы уместить отступы по краям. */ padding-right: 10px; padding-left: 10px; /* . */ >

Вот почему добавление padding-left и padding-right к обёртке будет хорошей идеей, особенно на мобильных устройствах.

Или подумайте о box-sizing, чтобы отступы вообще не влияли на общую ширину.

Какой HTML-элемент выбрать

У обёртки нет семантики. В ней просто находятся все визуальные элементы и контент на странице. Он всего лишь просто контейнер. С точки зрения семантики, — лучший выбор. У тоже нет семантического значения, это просто контейнер

Невольно возникает вопрос, а может ли для этой цели подойти элемент . Однако, спецификация W3C говорит вот что:

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

Элемент несёт в себе собственную семантику. Он подходит для тематической группировки контента. В каждом разделе должен быть заголовок (элемент h1-h6) в качестве дочернего элемента (прим. перев.: это не строгое правило, но крайне желательно соблюдать его).

Примерами разделов могут служить главы, различные вкладки в диалоговом окне или пронумерованные разделы диссертации. Домашнюю страницу можно разбить на разделы для введения, новостей и контактной информации.

Сходу это может показаться неочевидным. Но да, старый добрый лучше всего подходит для обёртки!

Тег против дополнительного

Следует отметить, что в качестве обёртки иногда может подойти . Вот такая реализация отлично работает:

body

И в результате у вас в разметке будет одним элементом меньше, поскольку удалён ненужный обёрточный .

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

• Вам нужно «прибить» футер к концу документа (к низу окна, если документ короткий). И если даже воспользоваться flexbox в качестве современного способа, всё равно не обойтись без обёрточного (прим. перев.: на самом деле можно задать display: flex самому body , тем более в примере по ссылке так и сделано).
• Вам требуется установить background-color целой странице. Поскольку у body есть max-width , то его нельзя использовать. Но тогда можно установить фон тегу . Но тут я сомневаюсь. После прочтения статьи HTML vs Body in CSS это звучит для меня немного необычно. Однако, я не слышал каких-то проблем или трудностей с применением цвета фона для элемента . Но это по-прежнему звучит немного странно, да? (Прим. перев.: проблема с фоновым цветом преувеличена, поскольку по стандарту CSS любой фон, указанный для , и так применяется ко всему , если тому явно не задан собственный фон. Но могут быть другие проблемы, например, со сторонними скриптами, позиционирующими всплывающие окна и т.п. именно относительно )

Лично я склоняюсь к тому, что для реализации обёртки всё же лучше использовать дополнительный . Таким образом, если требования спецификации позже изменятся, то потом не придётся добавлять обёртку и переписывать стили. В конце концов, речь же об одном-единственном добавочном DOM-элементе.

P.S. Это тоже может быть интересно:

• Не боритесь с каскадом, управляйте им!
• Псевдокласс :has() — не только «родительский селектор»
• CSS COLORS

Если вам понравилась статья, поделитесь ей!