Display: inline vs display: block

Ответ 1

display: block означает, что элемент отображается как блок, поскольку абзацы и заголовки всегда были. Блок имеет пробелы выше и ниже и не допускает никаких элементов HTML рядом с ним, кроме случаев, когда они заказываются иначе (например, путем добавления объявления float к другому элементу).

display: inline означает, что элемент отображается в строке, внутри текущего блока в той же строке. Только когда между двумя блоками элемент образует "анонимный блок", это, однако, имеет наименьшую возможную ширину.

Подробнее о параметрах отображения: http://www.quirksmode.org/css/display.html

Ответ 2

Блок

Получает доступную полную ширину, с новой строкой до и после (display: block;)

Инлайн

Занимает столько же ширины, сколько требуется, и не заставляет новые строки (display: inline;)

Ответ 3

display: block - разрыв строки до и после элемента

display: inline - прерывание строки до или после элемента

Ответ 4

display: block; создает блок-уровень, тогда как display: inline; создает элемент встроенного уровня. Немного сложно объяснить разницу, если вы не знакомы с моделью css-box, но достаточно сказать, что элементы уровня блока разбивают поток документа, тогда как встроенные элементы этого не делают.

Некоторые примеры элементов уровня блока включают в себя теги div, h1, p и hr.

Некоторые примеры встроенных элементов уровня включают в себя теги a, span, strong, em, b и i.

Лично мне нравится думать о встроенных элементах как о типографских элементах. Это не совсем или технически правильно, но для большинства встроенных элементов они очень похожи на текст.

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

Ответ 5

Дисплей: блок займет всю строку без прерывания строки

Дисплей: inline будет занимать только точное пространство, которое требуется.

 #block
  {
   display : block;
   background-color:red;
   border:1px solid;
  }

 #inline
 {
  display : inline;
  background-color:red;
  border:1px solid;
 }

В этом скрипте можно привести пример http://jsfiddle.net/RJXZM/1/.

Ответ 6

дисплей: блок

отображает всю строку (100%) экрана, она всегда равна 100% размера экрана

пример блока отображения

дисплей: встроенный блок занимает как можно больше ширины, он может составлять от 1% до 100% от размера экрана

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

почему мы имеем div и span

Стиль по умолчанию Div - это блок отображения: он занимает всю ширину экрана

span default styling - отображение: встроенный блок: span не запускается на новой строке и занимает как можно больше ширины

Ответ 7

block расширяются, чтобы заполнить их родительский элемент.

встроенные элементы контракта достаточно велики, чтобы держать своих детей.

Ответ 8

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

Ответ 9

Дисплей: блок Он очень ведёт себя так же, как теги "p", и он занимает всю строку, и рядом с ним не может быть никакого элемента, пока он не будет плыть.  Дисплей: встроенный Он просто использует столько места, сколько требуется, и позволяет другим элементам выравниваться рядом с самим собой.

Используйте эти свойства в случае форм, и вы получите лучшее понимание.

Ответ 10

Вот таблица сравнения

Здесь вы можете просмотреть .

Ответ 11

блок или встроенный блок могут иметь ширину (например, width: 400px), в то время как встроенный элемент не зависит от ширины. встроенный элемент может перейти к следующей строке текста (пример http://codepen.io/huijing/pen/PNMxXL изменить размер окна вашего браузера, чтобы увидеть это), в то время как элемент блока не может.

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }

Ответ 12

Элементы блока: Элементы понравились div, p, заголовки - уровень блока. Они начинаются с новой строки и занимают полную ширину родительского элемента. Встроенные элементы. Элементы, понравившиеся b, i, span, img, являются встроенным. Они никогда не начинаются с новой строки и занимают ширину содержимого.