Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

display inline-block css

Поддержи проект!!! smile

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

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

  1. Что такое - display inline-block css?
  2. Какая разница между display inline-block css и display inline
  1. Что это - 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

  2. Какая разница между 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.


Вас может еще заинтересовать список тем : #CSS | #CSS_PROPERTY | #DISPLAY_PROPERTY |
Последняя дата редактирования : 22.12.2020 14:06
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
display inline-block css что это display inline-block что это display inline-block css css display inline-block inline-block display inline-block css свойства что значит display inline-block в css

Последние комментарии :
Марат :
19/01/2021 01:13
Всегда пожалуйста!Приходите ещё!
подробнее.
аркадий :
19/01/2021 01:08
Спасибо!Меню вернулось. Класс!
подробнее.
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.