Что значит display block в css

display

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

Синтаксис

display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Значения

Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block , inline , list-item и none . Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.

CSS свойство display — block. Что это такое и к чему приведет?

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5

В этой статье речь пойдет о таком свойстве, как display и его значении block .

Свойство display позволяет изменить способ отображения определенного элемента на странице. Если в качестве значения задать block — тогда это приведет к тому, что любой элемент будет отображаться аналогично тегу div .

Это значит, что если не задана ширина, то она примет значение 100% и элемент станет тянутся на всю ширину. Так же это значит, что без свойства float , другие элементы не смогут оказаться слева или справа на одному уровне с этим элементом. Так же это значит, что элемент можно отцентровать при помощи свойства margin , и начинаем работать свойство padding для этого элемента.

Например, таким образом можно изменить способ отображения тега <a> или <span> . Зачем такое нужно? В случае, когда мы хотим сделать ссылку кнопкой или каким то специальным образом отобразить элемент <span> .

Как прижать блоки друг к другу display: inline-block?

Как прижать блоки друг к другу, убрать отступы между элементами со свойством display: inline-block ?

Дело в том, что inline-block’и — это как слова.
Если между ними в разметке есть пробельные символы, то браузер отобразит пробел.

Перечислю несколько нормальных способов убирания пробелов.
Есть ещё охапка не слишком нормальных — про них промолчу.

Писать их подряд

Или так

Использовать комментарии

Не закрывать li явно

Дополнение

В css нет честного способа не вообще не показывать пробелы между элементами. Есть костыль с font-size ом (описанный в соседнем ответе), который не только гробит наследование размера шрифта, но и не работает в некоторых браузерах; есть костыль с word-spasing / letter-spacing / margin , в котором мало того, что под каждый браузер своя конструкция, так он ещё и привязан к шрифту, поскольку ширина пробела различна в разных шрифтах. Убрать пробел из разметки — это честный способ, остальные — нет. А если надо только css, то следует отказаться от inline-block и использовать flex или float , но вопрос не об этом.

А вот что случается с теми, кто считает иначе.

На всякий случай приведу вариант с использованием flexbox

Здесь нет привязки к разметке, однако, flex-box в некотором роде подобен таблицам и его не рекомендуется использовать для значительных частей сайта (например, лейаута) из-за возможного снижения производительности. К тому же стоит проверить поддержку браузерами и необходимость использования префиксов.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *