Следить за новостями:

Категории
Свежие записи
BrainFБлог

display:block vs display:inline

css displayПочти все html-элементы являются либо блочными либо инлайновыми и по разному отображаются на странице


Свойства блочных элементов:

  • Всегда начинаются с новой строки
  • Управляемые height, line-height, top-margin и bottom-margin
  • Ширина по-умолчанию 100% от дочерних элементов, если она не указана явно.

Примерами блочных элементов являются <div>, <p>, <h1>, <form>, <ul> and <li>.
Inline-элементы имеют противоположные характеристики:

  • Начало в той же строке
  • Высота, высота строки, верхние и нижние отступы не могут быть изменены.
  •  Ширина соответствует ширине текста/изображения и не может быть изменена

Примерами инлайновых элементов являются <span>, <a>, <label>, <input>, <img>, <strong> and <em>.
Чтобы изменить статус элемента вы можете использовать CSS-свойство display (display:block или display:inline). Но какой смысл в этом изменении? На первый взгляд кажется что вы вряд ли когда-нибудь будете его использовать. Но на самом деле это достаточно мощная техника, которой вы можете пользоваться в ряде случаев:

  • Если inline-элемент должен начинаться с новой строки
  • Если блочный элемент должен располагаться  в той же строке
  • Для управления шириной inline-элементов (особенно это может пригодится для навигационных ссылок)
  • Управлять высотой inline-элементов
  • Установить цвет фона по ширине текста для блочных элементов без указания их ширины.

Еще по теме

Ваш комментарий
выберите имя