Styling Layout Wrappers In CSS
A website content should be wrapped or contained in a width that makes the content easy to read. To achieve that, we can use what has been called a wrapper, or a container. Using a wrapper in CSS can be possible in different ways which might introduce some challenges along with it.
In this article, I will explain about layout wrappers in CSS, how they work, how to use them, and when not to use them. Notice that throughout this article, I might mention the terms wrapper and container, and both of them means the same.
Are you ready? Let’s dive in!
A brief about wrappers
When you hear the word wrapper or container, it’s actually means that a group of elements is wrapped or contained inside another element. Without using additional elements, we can add a wrapper to the <body> element as below:
However, adding the wrapper to the <body> element might not practical for today’s work. The wrapper element can prevent child items from going outside its boundaries. Consider the following figure:
We have aside and main elements, and they live inside another element that wraps them. The .wrapper element has a width, of course.
Without a wrapper, the child elements will stick to the edges of the screen. This can be very annoying to the user, especially on a large screen.
The figure above shows how the elements will stretch when there is no element wrapping them. This behavior isn’t something that a user should experience. Let me explain the reason behind that.
Why page wrappers are necessary
Using a page wrapper can have many benefits that you should be aware of them as a designer or a developer. Here are some of the benefits:
- Making the content more readable. Without a wrapper, content like text and images can stretch to fill the whole width of the screen. For small screens, this might seems ok. However, for a large screen, this is extremely annoying.
- Grouping design elements are better for adding spacing.
- Dividing design elements into columns can’t be done easily without a wrapper.
Implementing a wrapper in CSS
Now that you understand the basics and the benefits of a wrapper, let’s explore how to build one in CSS.
Adding the width
The first thing to decide about when implementing a wrapper is the width of it. How do you want the wrapper width to be? That depends on your design. Generally speaking, having a wrapper width that ranges between 1000px — 1300px is the most commonly used. The popular framework Bootstrap, for example, uses a width of 1170px .
However, it’s not recommended to use the width property as it will cause horizontal scrolling when the screen size is less than 1170px . You can solve it by adding max-width , though.
While this works, you can get rid of width and use the max-width only as the following.
Now that we added the width for the wrapper. Let’s move on to centering it.
Centering the wrapper
To center the wrapper, you should add an auto margin from the left and right sides. See the following:
According to the CSS spec, here is how auto margins work:
If both ‘margin-left’ and ‘margin-right’ are ‘auto’, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.
If you are interested to dig in the auto keyword, I wrote a detailed article about it.
I used margin: 0 auto , this basically reset the margin for the top and bottom to zero and make it auto for the left and right sides. There are some consequences of using this, but I will come to them later in this article. For now, it’s recommended to use the longhand version of the margins.
Add padding on the left and right sides
An important thing to consider is to add padding for the left and right sides. When the viewport size is less than the maximum width of the wrapper, this will cause the wrapper edges to stick to the viewport.
By adding the padding, we can make sure that we will have a 16px offset from the left and right sides, even if the viewport size is less than the maximum width. The padding acts as a protective strategy that avoids making the wrapper sticking to the viewport edges when space is not enough.
22 June update: Using a percentage width for the wrapper
I got a reply about using a percentage width like max-width: 90% for the wrapper instead of using padding-left and padding-right .
While this works, the 90% of the viewport width will be too much on large screens, which you can override with a media query.
By using a percentage width, we added an extra step. We can avoid this step easily by using a fixed width value. Another solution suggested in this tweet says that we can combine width: 90% with a max-width: 1170px property.
That’s an interesting approach, but I would prefer to add the padding myself instead of depending on the percentage width.
The display type of a wrapper
Since the wrapper is a <div> , it’s a block-level element by default. The question is, what should we do if we want to change the display type to grid , when the content inside the wrapper should be placed in a grid?
Well, I don’t recommend doing that as it stands against the concept of separation of concerns. A wrapper is for wrapping other contents, that’s all. If you need a grid wrapper, then adding another <div> inside the wrapper with display: grid is easier, clear, and more maintainable in the future.
This is not recommended, the wrapper element could be used on another page and this might break the layout unintentionally.
A better solution would be as the following:
Notice how I added a separated <div> element to wrap the content. Please don’t mind the class and naming conventions for this example. We can have an even better solution by using a class naming that can be reused across different pages on the website. However, CSS naming conventions are out the scope of this article.
Adding margin between wrappers
Do you remember when I didn’t recommend using the shorthand version to center the wrapper element? I mean this:
While it works, it can get confusing when you have multiple wrappers on the page and you need to add spacing between them. If for some reason you added another variation class to the .wrapper , adding the margin might not work for specificity reasons.
The margin for the .wrapper-variation element won’t work because it’s overridden by margin: 0 auto . A shorthand property overrides a longhand one. To avoid such confusion, it’s recommended to use longhand for such cases.
Now let’s get to adding the margin. In each project, I prepare a set of utility classes for margin and padding, and I use them when necessary. Consider the following figure.
That way, the wrapper CSS stays as it is, and the spacing is added with an additional CSS utility class. Now, you might ask, why do I need to add multiple wrappers to a page, when I can add one? In the HTML above, there is a <section> element between two wrappers.
Using !important here is good, as the point of utility classes is to force a property, and by adding !important , we can ensure that.
A wrapper inside a full-screen section
There might be cases when you have a section with a background that has 100% viewport width, and within it, there is a wrapper. It’s similar to what is introduced in the previous example.
A page HTML structure can be like that:
The <section> has 100% width of the viewport. You can add a background color or image to it. Inside it, the wrapper prevents the content from becoming taking the full width of the viewport.
In the figure above, the section has a background image and it’s taking the full width of the viewport. The content inside is restricted by the wrapper’s width.
Does a hero section need a wrapper?
Well, it depends. Let’s explore the two most commonly used hero section designs.
The first one has its content centered and is constrained by a specific width.
The second one has its content spread to the main wrapper width.
To understand the two patterns better, let’s explore how to build each one of them.
A Hero with centered content
You might be tempted to place the hero content and then center everything without considering the wrapper.
With the HTML above, you could center the content with text-align :
This will look good until you resize the browser window. Here are the issues you might notice.
The content is stick to the edges.
Since there is no padding on the left and right sides, the content will stick to the edges without proper spacing. This is bad for the user as it will make it harder to observe and read the content.
Long line length for large screens
On large screens, the paragraph text can be very hard to read since the line length is too long. As per The Elements of Typographic Style Applied to the Web, the recommended number of characters for a line is 45 to 75. Anything far from that range will make the reading harder.
To avoid the above issues, a wrapper can be used to prevent the text length from becoming too long and to add spacing in mobile.
I used the class hero__wrapper since this wrapper might be custom only for the hero section, so it can have a certain width which is smaller than the usual wrapper element.
For centering the content, it can be done using the technique of your choice, depending on the use-case. For this example, using text-align: center is enough to center the content.
Should the wrapper be centered or left-aligned?
I don’t know if there is a black or white for this question, but I’ve seen websites that center the wrapper on laptop screens, and it’s left-aligned on desktop sizes.
The Techcrunch website is an example of this. Notice how the website is left-aligned on large screens.
For me, I love reading a website that is centered and has symmetrical spacing on the left and right sides. But it could be a reason that I don’t know about it. If you have an idea, please let me know on Twitter!
Using CSS variables for wrapper variations
It’s rare that you only need a wrapper with one size. A wrapper width could be small or big, depending on the content and use-case. By leveraging CSS variables, we can create a modern take on a wrapper, and you will have great flexibility. Consider the below:
If you notice, the var has two values, the first one if the variable —wrapper-width , and the second one is 1170px . The second variable is a fallback, which means that if the variable —wrapper-width is not set, the second one will be used.
What does that mean? It means that you can create a variation of the wrapper, by overriding the —wrapper-width as below:
That way, I created a custom wrapper without:
- Adding a new class
- Copying and duplicating styles
- More future-proof and can be easily tweaked from the DevTools
If you don’t like the solution of adding an inline style for overriding the CSS variable, you can add a new class instead. See below:
Using CSS display: contents
First, let me brief you about this value. Each element in CSS is a box, and that box contains content, padding, margin, and border. By using display: contents , that box will be removed from the flow. I can imagine it as removing the surrounding opening and closing tags.
In the example above, you might need to let the header expand to the full width of the page, instead of being restricted by the wrapper width.
By doing that, the .wrapper element will be hidden (kind of). Now, when display: flex is applied to the .site-header element, the descendants items of the .wrapper will be the child items of .site-header .
Fluid background, fixed content
In her CSS Secrets book, Lea Verou introduced an interesting technique that can be used for sections that have a fluid background (taking the full viewport width) with a wrapper inside it. Let’s review the common way of doing it.
The margin-left: auto and margin-right: auto works in a way that computes half the viewport width, minus the content width. That same thing can be done using padding.
We are not done yet. The content will be sticked to the edges on mobile. A solution for that would be the following.
An alternative solution would be to use the new CSS max() function. Simply, we set a minimum padding of 1rem , and the 50% — 585px calculation can be used as the other value.
If you want to learn more about min() , max() , and clamp() , I wrote a detailed article about them.
Related articles
The End
That’s a wrap. Do you have a comment or a suggestion? Please feel free to ping me on @shadeed9.
Стилизация контейнеров для содержимого веб-страниц
Содержимое веб-страниц должно быть размещено в некоем элементе, ширина которого, ограничивающая ширину содержимого, позволяет пользователям удобно работать с материалами сайта. Такие элементы называют «обёртками» (wrapper) или «контейнерами» (container). Стилизовать контейнеры средствами CSS можно по-разному. Некоторые способы работы с контейнерами ставят дизайнера перед необходимостью решать достаточно сложные задачи.
В этом материале я расскажу о контейнерах для содержимого веб-страниц: о том, как они работают, о том, как ими пользоваться, и о тех случаях, когда лучше обойтись без них. Обратите внимание на то, что я буду использовать здесь термины «обёртка» и «контейнер» как равнозначные.
Общие сведения
Когда вы, при разговоре о некоем элементе веб-страницы, узнаёте о том, что речь идёт об обёртке или о контейнере, это значит, что, на самом деле, перед вами — группа элементов, которая «обёрнута» в другой элемент или «размещена» внутри этого элемента. Если, настраивая веб-страницу, не пользоваться дополнительными элементами, отведя роль контейнера элементу <body> , то стилизовать этот элемент можно так:
Но в современных условиях использование в качестве контейнера элемента <body> может оказаться непрактичным. Контейнер позволяет не допустить выхода дочерних элементов за его границы.
Контейнер не даёт дочерним элементам выходить за его границы
Здесь имеется боковая и основная области страницы. Обе эти области находятся внутри элемента-контейнера. Ему назначен класс .wrapper . Среди прочих свойств контейнера, естественно, задана и его ширина. Структура HTML-кода такой страницы выглядит так:
Без использования элемента-обёртки дочерние элементы будут размещаться, ориентируясь на края экрана. Это может быть неудобным для пользователей. Особенно — для тех, которые работают на больших экранах.
Страница без элемента-контейнера, включающего в себя её содержимое
Здесь показано, как элементы, растягиваясь, занимают весь экран. Происходит это в том случае, если в макете страницы нет элемента-контейнера. Полагаю, не следует предлагать пользователям работать с подобными страницами. Позвольте мне объяснить эту мысль.
О необходимости использования контейнеров для содержимого веб-страниц
Использование контейнера для содержимого веб-страниц имеет множество сильных сторон, о которых стоит знать дизайнерам и разработчикам. Вот некоторые из этих сильных сторон:
- Использование контейнера улучшает читабельность содержимого страницы. Без контейнера содержимое, вроде текста, может растягиваться на всю ширину экрана. На маленьких экранах подобное может давать вполне приемлемый результат. Но на больших экранах это выглядит очень плохо.
- Группировка элементов дизайна страницы упрощает настройку расстояния между ними.
- Если элементы дизайна нужно сгруппировать по столбцам, это будет сложно сделать без использования контейнера.
Настройка элемента-контейнера средствами CSS
Теперь, когда мы поговорили об основах применения контейнеров, и о том, какие преимущества даёт их использование, давайте остановимся на том, как настраивать их средствами CSS.
▍Настройка ширины контейнера
Элемент-контейнер с настроенной шириной
При создании контейнера первое, что нужно решить, это то, какой ширины он будет. На вопрос о желаемой ширине контейнера можно ответить, проанализировав дизайн страницы. В целом, можно сказать, что чаще всего используются контейнеры с шириной, находящейся в пределах 1000px — 1300px . Например, в популярном фреймворке Bootstrap используется ширина, равная 1170px .
Здесь показана установка ширины элемента с классом .wrapper в 1170px , но, на самом деле, свойство width для настройки ширины контейнеров использовать не рекомендуется. Дело в том, что это приводит к необходимости горизонтального скроллинга страницы в том случае, если ширина области окна браузера, доступной для вывода страницы, меньше 1170px . Решить эту проблему можно, воспользовавшись свойством max-width :
Хотя это — вполне рабочий приём, можно полностью избавиться от свойства width и, как в следующем примере, пользоваться лишь свойством max-width :
Теперь, когда мы нашли подходящий механизм настройки ширины контейнера, давайте поговорим о том, как выровнять контейнер по центру страницы.
▍Выравнивание контейнера по центру страницы
Контейнер, выровненный по центру страницы
Для того чтобы выровнять контейнер по центру страницы, нужно, при настройке его внешних отступов, воспользоваться значением auto для левого и правого отступов:
Вот как, в соответствии со спецификацией CSS, ведут себя отступы, которым назначено значение auto :
Если margin-left и margin-right установлены в значение auto, то значения, которые будут использованы для этих отступов, будут одними и теми же. Это позволяет центрировать элемент по горизонтали относительно краёв содержащего его блока.
Если вас интересуют подробности об использовании ключевого слова auto в CSS — взгляните на эту мою статью.
Я воспользовался здесь конструкцией margin: 0 auto . Она сбрасывает размеры верхнего и нижнего отступов в значение 0, а левый и правый отступы настраивает в соответствии с особенностями применения ключевого слова auto . У такого шага есть некоторые последствия, о которых я расскажу ниже. А пока же хочу отметить, что рекомендуется использовать полный вариант вышеописанной сокращённой конструкции для настройки внешних отступов:
▍Настройка левого и правого внутренних отступов
Горизонтальные (левый и правый) внутренние отступы
При проектировании контейнера важно уделить внимание настройке его левого и правого внутренних отступов. Когда размер области просмотра меньше максимальной ширины контейнера, это приведёт к тому, что края контейнера будут прижаты к границам области просмотра. Вот пример стилизации контейнера, в котором предусмотрены внутренние отступы:
Настроив внутренние отступы контейнера, мы можем быть уверены в том, что края контейнера, в любом случае, будут находиться как минимум в 16px от краёв области просмотра, даже в том случае, если ширина области просмотра окажется меньше максимальной ширины контейнера. Внутренние отступы — это нечто вроде защитного механизма, который не даёт границам контейнера прижиматься к границам области просмотра даже в том случае, когда область просмотра уже, чем максимальная ширина контейнера.
▍Использование процентных значений при настройке контейнеров
Мне, после публикации исходного варианта этого материала, написали об использовании процентных значений при настройке контейнеров. В частности, речь идёт о применении CSS-свойства max-width: 90% вместо использования свойств padding-left и padding-right .
Использование процентных значений при настройке контейнеров и ситуации, когда значение max-width: 90% приводит к приемлемым и неприемлемым результатам
Хотя этот подход оказался вполне рабочим, выяснилось, что на больших экранах 90% ширины области просмотра — это слишком много. Но данную проблему можно решить, воспользовавшись медиа-запросом:
В результате оказывается, что, используя процентное значение, мы усложняем CSS-код. Для того чтобы избавить себя от необходимости применения медиа-запроса, мы можем использовать фиксированное значение для ширины. Ещё одно решение, предложенное в этом твите, заключается в применении комбинации свойств width: 90% и max-width: 1170px :
Это — интересный подход, но я предпочёл бы настраивать внутренние отступы самостоятельно, не полагаясь на процентные значения.
▍Свойство display элемента-контейнера
Так как для оформления контейнеров используют теги <div> , контейнеры, по умолчанию, являются блочными элементами. Что если понадобится поменять свойство контейнера display на grid , сделав это для того чтобы разместить его дочерние элементы в сетке?
Я не рекомендую этого делать, так как это идёт вразрез с идеей разделения ответственностей. Элемент-контейнер, «обёртка», это сущность, предназначение которой заключается в том, чтобы «оборачивать» другие элементы. Если нужно разместить дочерние элементы контейнера в сетке, тогда стоит добавить в контейнер ещё один <div> , включающий в себя другие элементы, свойство которого display установлено в значение grid . Это будет проще и чище, чем настройка сетки средствами основного контейнера. Такой подход, кроме того, позволяет говорить о том, что в будущем проект, в котором он используется, будет легче поддерживать.
Пусть имеется такой контейнер:
Задавать свойство display: grid подобного элемента не рекомендуется из-за того, что такой элемент может использоваться на разных страницах. Его особые настройки могут случайно привести к нарушению размещения элементов. Вот неудачный вариант настройки контейнера, о котором идёт речь:
Лучше будет использовать такой HTML-код:
Элемент с классом featured-news можно стилизовать так:
Обратите внимание на то, что в этом примере мы использовали отдельный элемент <div> в качестве ещё одной обёртки для содержимого страницы. На имена классов, использованных здесь, можете внимания не обращать. Для решения подобной задачи можно подобрать более удачные имена классов, которые подойдут для многократного использования на различных страницах сайта. Однако именование CSS-сущностей выходит за рамки данного материала.
▍Настройка внешних отступов, разделяющих элементы-контейнеры
Помните, как выше я не рекомендовал использование сокращённого способа настройки внешних отступов для центрирования элемента-контейнера? Речь шла о такой конструкции:
Хотя это — вполне рабочий стиль, в том случае, если на странице имеется несколько элементов-обёрток, и между ними должно быть некоторое расстояние, применение подобного стиля может привести к путанице. Если вы, по какой-то причине, решите уточнить стилизацию элемента-обёртки, применив дополнительный класс, то настройка внешних отступов с помощью этого класса не даст нужных результатов из-за особенностей расчёта значений специфичности CSS-правил.
Я имею в виду такую схему стилизации:
Свойство margin для элемента с классом .wrapper-variation не будет применено к элементу из-за того, что его переопределяет свойство margin: 0 auto . Краткая форма настройки свойства переопределяет его полную форму. Для того чтобы подобного избежать, рекомендуется в таких случаях использовать полную форму записи свойств. То есть, при стилизации элемента с классом .wrapper нужно поступить так:
Теперь поговорим о настройке внешних отступов элементов. При работе над каждым своим проектом я готовлю набор вспомогательных классов для настройки внутренних и внешних отступов. Я использую их там, где они нужны. Взгляните на следующий рисунок.
Автономный контейнер и контейнер внутри элемента <section>
При таком подходе CSS-код для элемента-обёртки остаётся в неизменном виде, а расстояния между элементами настраиваются с использованием вспомогательных CSS-классов. Тут у вас может появиться вопрос о том, зачем мне понадобилось использовать на странице несколько контейнеров, когда можно обойтись одним. Обратите внимание на то, что в вышеприведённом HTML-коде имеется элемент <section> , расположенный между двух элементов-обёрток.
Здесь хорошо показывает себя использование модификатора !important . Дело в том, что смысл использования вспомогательных классов заключается в том, чтобы принудительно менять значения свойств. Обеспечить такое поведение можно с помощью !important .
Контейнер внутри полноэкранного элемента
В некоторых случаях бывает так, что есть элемент <section> с фоном, занимающий 100% ширины области просмотра, а внутри этого элемента имеется элемент-контейнер. Эта схема похожа на ту, которую мы рассматривали в предыдущем разделе.
HTML-структура страницы в такой ситуации может выглядеть так:
Элемент <section> занимает 100% ширины области просмотра. Этому элементу можно назначить фоновое изображение или фоновый цвет. Контейнер, находящийся внутри этого элемента, не даёт содержимому занимать всю ширину области просмотра.
Элемент <section> занимает всю ширину области просмотра, контейнер ограничивает пространство, в котором выводится содержимое страницы
На этом рисунке у элемента <section> задано фоновое изображение. Он занимает всю ширину области просмотра, а содержимое страницы, выводимое в контейнере, ограничено шириной контейнера.
Нужно ли заключать в контейнер содержимое верхнего блока страницы?
Нужен ли контейнер для оформления верхнего блока страницы, который часто называют «Hero Section»? Это зависит от каждой конкретной ситуации. Исследуем два самых распространённых подхода к оформлению верхних блоков страниц.
Первый подход предусматривает центровку содержимого блока и ограничение ширины содержимого.
Ширина содержимого верхнего блока страницы ограничена
Второй вариант предусматривает распределение содержимого в пределах верхнего блока.
Содержимое распределено в пределах верхнего блока страницы
Для того чтобы лучше разобраться в этих паттернах, предлагаю исследовать особенности их внутреннего устройства.
Верхний блок страницы, содержимое которого выровнено по центру
Возможно, разрабатывая верхний блок страницы, вам захочется разместить в соответствующем элементе <section> некое содержимое и выровнять его по центру без использования элемента-контейнера.
При стилизации вышеприведённого HTML-кода выровнять его содержимое по центру можно, воспользовавшись свойством text-align :
При таком подходе всё будет выглядеть достойно до тех пор, пока не изменится ширина окна браузера. Вот разбор проблем, которые это может вызвать.
▍Проблема №1: содержимое раздела прижимается к краям области просмотра
Так как в данном примере не настроены правый и левый внутренние отступы, содержимое раздела будет размещено вплотную к границам этого раздела. Это создаёт неудобства для пользователей, так как им сложнее будет читать содержимое верхнего блока страницы.
Содержимое раздела прижато к его краям
▍Проблема №2: слишком большая длина строк текста на экранах большого размера
На экранах большого размера текст, оформленный тегом <p> , может быть очень тяжело читать из-за того, что длина абзаца окажется слишком большой. В соответствии с этим документом, рекомендованное число символов в строке составляет 45-75. Выход длины строки за пределы этого диапазона усложняет чтение.
Длина строки слишком велика
▍Решение проблем
Для решения вышеозначенных проблем можно использовать контейнер. Он позволит и удержать длину строки в разумных пределах, и предотвратить плотное прилегание содержимого к границам раздела.
Здесь я, настраивая контейнер, использую имя класса hero__wrapper , так как этот контейнер, вполне возможно, будет уникальным и будет применяться только для оформления верхнего блока страницы. Поэтому, в частности, ширина контейнера может быть меньше, чем ширина контейнеров, используемых в обычных условиях.
Выровнять содержимое верхнего блока страницы по центру можно, используя любой удобный подход. Тут всё зависит от каждой конкретной ситуации. В данном примере для выравнивания контента достаточно воспользоваться свойством text-align: center .
Как выравнивать контейнер: по центру, или по левому краю страницы?
Я не могу дать однозначного ответа на этот вопрос, однако я видел сайты, контейнеры, используемые на которых, выравниваются на экранах ноутбуков по центру, а на экранах настольных компьютеров — по левому краю страницы.
Примером такого сайта является Techcrunch. Обратите внимание на то, что на экране настольного компьютера содержимое сайта выровнено по левому краю страницы.
Выравнивание содержимого на экране ноутбука и на экране настольного компьютера
Мне нравится работать с сайтами, содержимое которых выровнено по центру. На страницах таких сайтов имеются симметричные отступы слева и справа. Но у того, что содержимое некоторых сайтов выравнивают по левому краю страницы, может быть какая-то причина, о которой я не знаю. Если вы знаете о том, почему это так, дайте мне знать.
Использование CSS-переменных для создания различных вариантов стилизации контейнеров
Редко бывает так, что все элементы-контейнеры, используемые в некоем проекте, имеют одну и ту же ширину. Ширина контейнера может меняться в зависимости от содержимого контейнера и от того, как именно он используется. Большую гибкость в работе с контейнерами даёт использование CSS-переменных. Это, кроме того, весьма современный подход к настройке контейнеров. Рассмотрим пример.
Вот HTML-код контейнера:
Если вы внимательно прочли CSS-код, вы могли заметить, что var() передаётся два значения: первое — это переменная —wrapper-width , второе — это обычное значение 1170px . Второе значение является запасным. Смысл его существования заключается в том, что оно будет использовано в том случае, если значение переменной —wrapper-width окажется неустановленным.
Что это значит? А это значит, что в наших руках оказывается инструмент для создания различных вариантов элементов-обёрток благодаря возможности переопределения значения переменной —wrapper-width . Выглядит это так:
Благодаря этому подходу я смог создать особый контейнер, не прибегая при этом к следующим действиям:
- Добавление к элементу нового класса.
- Копирование и дублирование существующих стилей.
Если вам не нравится этот подход из-за использования в нём встроенного стиля для переопределения значения CSS-переменной, вы вполне можете решить эту задачу и с помощью добавления к элементу нового класса. Например — так, как показано ниже.
Так выглядит стиль:
Здесь можно найти рабочий пример.
Использование display: contents
Для начала позвольте немного рассказать о значении contents свойства display . Каждый элемент в CSS — это блок. В этом блоке что-то содержится, у него есть внутренние и внешние отступы и граница. Использование свойства display: contents приводит к тому, что блок, которому оно назначено, удаляется из потока документа. Это можно представить себе как удаление открывающего и закрывающего тегов блока.
Элемент-обёртка
При реализации чего-то, напоминающего этот пример, может понадобиться сделать так, чтобы заголовочный раздел сайта мог бы растягиваться до полной ширины страницы, чтобы его ширина не ограничивалась бы свойствами контейнера.
Здесь, благодаря использованию свойства display: contents , элемент-обёртка будет как бы «скрыт». Теперь, когда свойство display: flex применяется к элементу с классом .site-header , дочерние элементы контейнера становятся дочерними элементами .site-header .
Заголовочная часть сайта занимает, в ширину, всё доступное пространство
Отзывчивый фон и фиксированное содержимое
В книге CSS Secrets представлена интересная техника, которая может быть использована для стилизации разделов, имеющих отзывчивый фон (фон, способный занимать всю доступную ширину области просмотра) и элемент-контейнер для содержимого. Рассмотрим обычный способ создания макетов подобных разделов.
Здесь значения свойств margin-left: auto и margin-right: auto вычисляются путём взятия половины ширины области просмотра и вычитания из неё ширины содержимого. Того же самого можно добиться с использованием внутренних отступов.
Внутренние отступы
Но дело пока ещё не сделано. На мобильных устройствах содержимое будет прижато к краям области просмотра. Решить эту проблему можно, например, так:
В качестве альтернативного решения можно предложить применение новой CSS-функции max() . Используя её, мы задаём минимальный размер внутреннего отступа, равный 1rem , а в качестве второго значения, передаваемого ей, указываем выражение 50% — 585px .
Если вам интересны подробности о CSS-функциях min() , max() и clamp() — вот мой материал на эту тему.
Для чего теги "оборачивают" Wrapper'ом?
Для чего теги «оборачивают» Wrapper’ом и почему у Wrappera часто ставят position:relative ? Что вообще дает использование wrapper’а?
Это может быть связано с position:absolute для вложенного элемента. Дело в том, что без обёртки с position:relative координаты такого элемента будут отсчитываться относительно всего документа, а с обёрткой — относительно обёрточного элемента.
Это всего лишь контейнер для удобства, заключая блоки в обертку проще центрировать, задавать общую ширину. и т.д. Релейтив ставят если собираются абсолютно позиционировать внутренние блоки.
В целом, wrapper используют для удобства позиционирования. Самому wrapper , присваивают минимум свойств.
А иногда вообще оставляют его без них. Почему просто не оставлять див без класса? Во первых, противоречит некоторым методологиям (например БЭМ). Во вторых, слово «wrapper» переводится как «обертка» и дает понять, тем кто будет работать с кодом после вас, зачем этот div нужен (при беглом просмотре). Также, он может послужить прослойкой для функционирования различных скриптов.
The Best Way to Implement a “Wrapper” in CSS
Sometimes the first bit of HTML we write in a new document is an element that wraps everything else on the page. The term wrapper is common for that. We give it a class, and that class is responsible for encapsulating all visual elements on the page.
I’ve always struggled to with the best way to implement it. I found a related thread on StackOverflow that has more than 250,000 views, so obviously I’m not the only one wondering! I’ll sum up my latest thoughts in this article.
Before we dive into it, let’s first examine the difference between the “wrapper” and the “container”.
I believe there is a difference between wrapper and container elements.
In programming languages, the word container is generally used for structures that can contain more than one element. A wrapper, on the other hand, is something that wraps around a single object to provide more functionality and interface to it.
So, in my opinion, it makes sense to have two different names because they intend different functions.
Speaking of the wrapper, it’s common to think of a <div> that contains all the rest of the HTML of the document. I’m sure many of us have lived through a time where we set that to 960px in width and center aligned all our main content. Wrappers are also used for things like applying a sticky footer.
The container, on the other hand, usually intends another kind of containment. One that sometimes necessary to implement a behavior or styling of multiple components. It serves the purpose of grouping elements both semantically and visually. As an example, Bootstrap has “container classes” that house their grid system or contain various other components.
The terms wrapper and container can also mean the same thing depending on the developer and what they intend. There might be other conventions too, so the best advice is usually to implement whatever makes the most sense to you. But remember, naming is one of the most fundamental and important parts of developer activities. Naming conventions make our code more readable and predictable. Choose carefully!
Here’s an example of a general page wrapper:
width vs max-width
Setting the width of a block-level element will prevent it from stretching out to the edges of its container (good for things like readable line lengths). Therefore, the wrapper element will take up the specified width. The problem occurs when the browser window is narrower than the specific width of the wrapper. That will trigger a horizontal scrollbar, which is almost always undesirable.
Using max-width instead, in this situation, is better for narrower browser windows. This is important when making a site usable on small devices. Here’s a good example showcasing the problem.
In terms of responsiveness, max-width is the better choice!
I’ve seen a lot of developers forget one particular edge case. Let’s say we have a wrapper with max-width set to 980px. The edge case appears when the user’s device screen width is exactly 980px. The content then will exactly glue to the edges of the screen with no breathing room left.
The “no breathing room left” problem.
We usually want a bit of padding on the edges. That’s why if I need to implement a wrapper with a total width of 980px, I’d do it like so:
Therefore, that’s why adding padding-left and padding-right to your wrapper might be a good idea, especially on mobile.
Or, consider using box-sizing so that the padding doesn’t change the overall width at all.
Which HTML Element to Choose
A wrapper has no semantic meaning. It simply holds all visual elements and content on the page. It’s just a generic container. In terms of semantics, <div> is the best choice. The <div> also has no semantic meaning and it just a generic container.
One might wonder if maybe a <section> element could fit this purpose. However, here’s what the W3C spec says:
The <section> element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
The <section> element carries it’s own semantics. It represents a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.
It might not seem very obvious at first sight, but yes! The plain ol’ <div> fits best for a wrapper!
Using the <body> tag vs. Using an additional <div>
It’s worth mentioning that there will be some instances where one could use the <body> element as a wrapper. The following implementation will work perfectly fine:
And it will result in one less element in your markup because you can drop that unnecessary wrapper <div> this way.
However, I wouldn’t recommend this, due to flexibility and resilience to changes. Imagine if on a later stage of the project any of these scenarios happen:
- You need to enforce a footer to “stick” to the end of the document (bottom of the viewport when the document is short). Even if you can use the most modern way to do it – with flexbox, you need an additional wrapper <div> .
- You need to set the background-color of the whole page. Normally, whatever background you set on the <body> will behave as if it was set on the <html> element should it not already have a background. Just a weird thing in CSS. But if your <html> element does already have a background, and you set the body to something else, and the body has any kind of spacing constraint, backgrounds will get weird. It’s a tricky thing.
I would conclude it is still best practice to have an additional <div> for implementing a CSS wrapper. This way if spec requirements change later on you don’t have to add the wrapper later and deal with moving the styles around. After all, we’re only talking about one extra DOM element.