Display inline-block css

Свойство "display inline-block css", "что такое display inline-block" - это свойство элемента Dom, который может быть по умолчанию, либо установлен вручную пользователем.

Display inline-block css свойство

1. Что такое - display inline-block css?
2. Какая разница между display inline-block css и display inline

Что это - display inline-block css?

Дадим определение: что такое display inline-block css:

display inline-block css - это свойство css, которое может быть у элемента Dom по умолчанию, либо установлен пользователем. Свойство display inline-block css похоже на display inline css, но с некоторым отличием, которое мы рассмотрим!

Синтаксис display inline-block css

"3 способа css" существует для display inline-block css, которое можно использовать для тегов.

Как ведет себя display inline-block css на странице?

Создадим два примера, block и inline-block и сравним результат!

Тестовый div добавим attribute style, + border, чтобы сделать грани данного тега видимыми.

Html:

Возьмем тег div для примера <div style="border:1px solid">здесь текст в элементе</div> + <div style="border:1px solid">второй элемент</div> обязательно нам нужен текст после элементов.

Пример:
Возьмем тег div для примера
здесь текст в элементе
+
второй элемент
обязательно нам нужен текст после элементов.
Поведение div - стандартное, по умолчанию и следовало ожидать! Напоминаю, что у тега "div" свойство display block
Продолжим експеримент далее: Теперь добавим в этот же div свойство display со значением inline-block Html:

Возьмем тег div для примера <div style="display:inline-block;border:1px solid">здесь текст в элементе</div> + <div style=display:inline-block; "border:1px solid">второй элемент</div> обязательно нам нужен текст после элементов.

И выведем результат:
Возьмем тег div для примера
здесь текст в элементе
+
второй элемент
обязательно нам нужен текст после элементов.

Вывод о display inline-block css

Какой вывод можно сделать из выше приведеного примера?

Что тег div, c блочными свойствами по умолчанию, приобрел свойства строчного элемента, как тег span.

НО! Какая разница между display inline-block css и display inline css


Какая разница между display inline-block css и display inline

Как выше уже был задан вопрос - а какая разница между - display inline-block css и display inline.

Давайте разберемся! Это очень просто!

Возьмем для наших опытов тег span - 2 шт. и разместим их рядом, и сверху и снизу должен быть текст, добавим класс "a" с "display: inline" - хотя мы могли бы его и не добавлять, потому, что span имеет значение "inline" по умолчанию.

HTML:

<span class="a">Первый</span> блок, и <span class="a">второй</span>

А второй блок точно такой же, только класс "b" с display: inline-block - все остальные стили абсолютно одинаковые!

Css:

<style>

span.a {

display: inline; /* the default for span */

width: 70px;

height: 70px;

padding: 0 5px;

border: 1px solid blue;

background-color: yellow;

}

span.b {

display: inline-block;

width: 70px;

height: 70px;

padding: 0 5px;

border: 1px solid blue;

background-color: yellow;

}

</style>

Смотрим результат:

Пример "display: inline"

Для того, чтобы увидеть разницу между display inline-block css и display inline нам понадобится Первый блок, и второй, после блока тоже нужно несколько слов с возможным переносом строки. Чтобы под элементом оказался текст.

Пример "display: inline-block"

Для того, чтобы увидеть разницу между display inline-block css и display inline нам понадобится Первый блок, и второй, после блока тоже нужно несколько слов с возможным переносом строки. Чтобы под элементом оказался текст.

Вывод из выше приведенных свойств display inline-block css и display inline

Разница между display inline-block css и display inline в том, что строчные свойство "inline" не позволяют устанавливать размеры элемента в отличии от "строчно-блочного" display inline-block css.