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

Question

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

в чем основное различие между следующими CSS:

display:inline

и так:

display:block

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

411 12

css

12 ответов:

Comments

Ничего не найдено.

Pranay Rana · Accepted Answer · 2010-06-23 08:19:55

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

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

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

Ravish · Accepted Answer · 2010-06-23 08:09:16

блок

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

Inline

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

xj9 · Accepted Answer · 2012-06-05 08:52:18

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

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

Damien Wilson · Accepted Answer · 2010-06-23 08:21:50

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

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

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

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

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

Niko Bellic · Accepted Answer · 2017-12-21 00:06:16

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

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

Aarthi · Accepted Answer · 2014-03-07 09:04:22

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

дисплей :инлайн займет только точное пространство, которое ему требуется.
 #block
  {
   display : block;
   background-color:red;
   border:1px solid;
  }

 #inline
 {
  display : inline;
  background-color:red;
  border:1px solid;
 }
вы можете сослаться на пример в этой скрипке http://jsfiddle.net/RJXZM/1/.

Harshit · Accepted Answer · 2015-11-19 10:47:06

display: block

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

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

display: inline-block занимает столько ширины, сколько необходимо ,это может быть от 1% до 100% от размера экрана

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

вот почему у нас есть div и span

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

стиль span по умолчанию-display:inline block: span не запускается на новой линии и занимает столько ширины, сколько необходимо

James Curran · Accepted Answer · 2017-05-23 17:53:20

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

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

Janick Bernet · Accepted Answer · 2010-06-23 08:11:37

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

kunal · Accepted Answer · 2014-06-09 00:28:52

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

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

EKanadily · Accepted Answer · 2016-07-14 14:52:42

блок или встроенный блок может иметь ширину (например, ширина: 400px), в то время как встроенный элемент не зависит от ширины. встроенный элемент может охватывать следующую строку текста (Пример http://codepen.io/huijing/pen/PNMxXL измените размер окна браузера, чтобы увидеть это), в то время как элемент блока не может.
 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }

Avinash Malhotra · Accepted Answer · 2017-06-29 21:07:23

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