Css display boxes inline

Зачем нужно свойство display в CSS

Каждому HTML-элементу на странице соответствует определенный бокс (англ. box — коробка) — это просто прямоугольная область. Тип отображения бокса можно изменить с помощью CSS-свойства display .

Тип отображения может влиять сразу на две вещи: на расположение самого бокса в потоке и на расположение дочерних элементов внутри бокса.

Тот факт, что вы можете изменить значение отображения любого элемента, означает, что вы можете выбрать HTML-элементы согласно их семантическому значению, не заботясь о том, как они будут выглядеть. То, как они выглядят, можно изменить.

Рассмотрим четыре основных типа боксов:

• блочные, display: block ,
• строчные, display: inline ,
• блочно-строчные, display: inline-block ,
• гибкие или флексовые (флексы), display: flex .

Блочный бокс

Особенности блочных боксов

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

На блочные боксы действуют все свойства блочной модели ( width , height , margin , padding ).

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

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

Пример поведения

Внутри есть четыре тега, и все эти теги являются блочными.

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

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

Строчный бокс

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

Элементы, боксы которых по умолчанию являются строчными, это теги, с помощью которых размечают небольшие куски текста, словосочетания: , , , , , , , .

Отличия строчных и блочных боксов

У строчных боксов несколько отличий от блочных:

• Строчные боксы ведут себя как текст, то есть могут располагаться и на одной строке, и на нескольких. Если такой бокс не помещается на одной строке, то он спокойно переносится на следующую.
• Строчные боксы плохо взаимодействуют со свойствами блочной модели. Некоторые свойства на них просто не действуют, а некоторые — действуют частично. Например, отступы в строчных боксах работают только в горизонтальном направлении.
• Размеры строчных боксов всегда зависят от содержания.

Пример поведения

Посмотрите, как ведёт себя строчный бокс, если он не помещается в строке.

Строчные боксы — это не только теги и , но и обычный текст, который не обёрнут во фразовый тег. Такие фрагменты текста оборачиваются в анонимный строчный бокс. Анонимных боксов в рассмотренном примере три (это участки между явными строчными боксами, которые принадлежат тегам).

Блочный бокс — это прямоугольный статичный «кирпич», а строчный бокс — это что-то гибкое и текучее внутри этого «кирпича».

Блочно-строчный бокс

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

Флексбокс

Флексы — основной инструмент построения крупных сеток и микросеток.

Есть несколько особенностей, которые следует помнить и учитывать при использовании флексов:

• Все блоки очень легко делаются «резиновыми», что уже следует из названия flex. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.
• Выравнивание по вертикали и горизонтали, базовой линии текста, отлично работает.
• Расположение элементов в HTML не имеет решающего значения. Его можно поменять в CSS.
• Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая всё предоставленное место.
• Множество языков в мире используют написание справа налево rtl (right-to-left), в отличии от привычного нам ltr (left-to-right). Флекс адаптирован для этого. В нем есть «начало» и «конец», а не «право» и «лево». В браузерах с локалью rtl все элементы будут автоматически расположены в обратном порядке.
• Синтаксис CSS-правил очень прост и осваивается довольно быстро.

При этом есть вещи, которые не стоит забывать при использовании флексбокса:

• Не используйте флексы там, где в этом нет необходимости.
• Разберитесь с флексбоксом и знайте его основы. Так намного легче достичь желаемого результата. К примеру, по умолчанию флекс-элементы вытягиваются по поперечной оси и установленное значение высоты для элемента никак не учитывается.
• Не забывайте про margin . Они учитываются при установке выравнивания по осям. Важно помнить, что margin во флексбоксе не «схлопываются», как это происходит в обычном потоке.
• Значение float у флекс-блоков не учитывается и не имеет значения.

Еще о флексбоксах

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

CSS display

The CSS display module defines how the CSS formatting box tree is generated from the document element tree and defines properties controlling it.

Reference

Properties

Data types

Guides

Flow layout (display: block, display: inline)

Flexible box layout

• Basic concepts of flexbox
• Aligning items in a flex container
• Controlling ratios of flex items along the main axis
• Mastering wrapping of flex items
• Ordering flex items
• [Relationship of flexbox to other layout methods](/en-US/docs/Web/CSS/CSS_flexible_box_layout/slug: Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods)
• Backwards compatibility of flexbox
• Typical use cases of flexbox

Grid layout

• Basic concepts of grid layout
• Relationship of grid layout to other layout methods
• Line-based placement
• Grid template areas
• Layout using named grid lines
• Auto-placement in grid layout
• Box alignment in grid layout
• Grids, logical values and writing modes
• CSS Grid Layout and accessibility
• CSS Grid Layout and progressive enhancement
• Realizing common layouts using grids

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS Layout — display: inline-block

Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element.

Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.

Compared to display: block , the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

The following example shows the different behavior of display: inline , display: inline-block and display: block :

Example

span.a <
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
>

span.b display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
>

span.c display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
>

Using inline-block to Create Navigation Links

One common use for display: inline-block is to display list items horizontally instead of vertically. The following example creates horizontal navigation links:

Example

.nav <
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
>

.nav li display: inline-block;
font-size: 20px;
padding: 20px;
>

Grid of Boxes

It has been possible for a long time to create a grid of boxes that fills the browser width and wraps nicely (when the browser is resized), by using the float property.

However, the inline-block value of the display property can make this easier (but it is not flawless — see more examples below).

Examples

Floating boxes — using float (notice that we also need to specify a clear property for the element after the floating boxes):

Example

.floating-box <
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
>

The same effect can be achieved by using the inline-block value of the display property (notice that no clear is needed):

Example

.floating-box <
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
>

Источник