Свойство CSS Display

Как работать сdisplayсвойство в CSS

ВdisplayСвойство объекта определяет, как он отображается браузером.

Это очень важное свойство, и, вероятно, оно имеет наибольшее количество значений, которые вы можете использовать.

Эти значения включают:

  • block
  • inline
  • none
  • contents
  • flow
  • flow-root
  • table(и всеtable-*те)
  • flex
  • grid
  • list-item
  • inline-block
  • inline-table
  • inline-flex
  • inline-grid
  • inline-list-item

плюс другие, которые вы вряд ли будете использовать, напримерruby.

Выбор любого из них значительно изменит поведение браузера с элементом и его дочерними элементами.

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

  • block
  • inline
  • inline-block
  • none

Остальные я освещаю в отдельных сообщениях:

inline

Inline - это отображаемое значение по умолчанию для каждого элемента в CSS.

Все теги HTML отображаются встроенными сразу после установки, за исключением некоторых элементов, таких какdiv,pиsection, которые заданы какblockагентом пользователя (браузером).

Встроенные элементы не имеют полей или отступов.

То же самое по высоте и ширине.

Тыможетдобавьте их, но внешний вид на странице не изменится - они рассчитываются и применяются браузером автоматически.

inline-block

Похожий наinline, но сinline-block widthиheightприменяются так, как вы указали.

block

Как уже упоминалось, обычно элементы отображаются встроенными, за исключением некоторых элементов, в том числе

  • div
  • p
  • section
  • ul

которые установлены какblockбраузером.

Сdisplay: block, элементы располагаются один за другим по вертикали, и каждый элемент занимает 100% страницы.

Значения, присвоенныеwidthиheightсвойства соблюдаются, если вы устанавливаете их вместе сmarginиpadding.

none

С помощьюdisplay: noneзаставляет элемент исчезнуть. Он все еще присутствует в HTML, но не отображается в браузере.

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: