дисплей: встроенный против дисплея: блок

Question

Какова основная разница между следующим CSS:

display:inline

и этим:

display:block

Используя их отдельно для элемента, я получаю тот же результат.

Answer 1

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

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

Answer 2

Блок

Занимает всю доступную ширину с новой строкой до и после (отображение: блок;)

Встроенный

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

Answer 3

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

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

Answer 4

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

Вы можете просмотреть примеры здесь.

Answer 5

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

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

Вот некоторые примеры встроенных элементов уровня: a, span, strong, em, b и i HTML-теги.

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

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

Answer 6

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

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

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

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

Вы можете сослаться на пример в этой скрипке http://jsfiddle.net/RJXZM/1/.

Answer 7

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

занимает весь ряд (100%) экрана, он всегда равен 100% размера экрана

блок дисплеяпример

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

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

, поэтому у нас есть div и span

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

span По умолчанию отображается стиль: встроенный блок: span не начинается с новой строки и занимает столько ширины, сколько необходимо

Answer 8

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

inline элементы сокращаются, чтобы быть достаточно большими, чтобы содержать их потомков.

Answer 9

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

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

Answer 10

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