Что же представляет собой разницу между inline
и inline-block
значений CSS display
?
607
Представьте себе <span>
элемент внутри <div>
. <span>
Например, если вы присвоите элементу высоту 100 пикселей и красную рамку, он будет выглядеть следующим образом:
дисплей: встроенный
дисплей: встроенный блок
дисплей: блок
Код: http://jsfiddle.net/Mta2b/
Элементы с display:inline-block
похожи на display:inline
элементы, но они могут иметь ширину и высоту . Это означает, что вы можете использовать элемент inline-block как блок при передаче его внутри текста или других элементов.
Разница поддерживаемых стилей в качестве резюме:
margin-left
, margin-right
, padding-left
,padding-right
margin
, padding
, height
,width
p
,div
получают всю ширину линии (форсируют разрыв строки), но учитывают ширину / высоту и все горизонтальные / вертикальные отступы / поля. Элементы inline-block имеют то же поведение, что и block, но без полногоdisplay: inline;
режим отображения для использования в предложении Например, если у вас есть абзац и вы хотите выделить одно слово, которое вы делаете:<em>
Элемент имеетdisplay: inline;
по умолчанию, так как этот тег всегда используется в предложении.<p>
Элемент имеетdisplay: block;
по умолчанию, потому что ни предложение , ни в предложении, это блок предложений.Элемент с
display: inline;
не может иметьheight
или,width
или вертикальmargin
. Элемент сdisplay: block;
может иметьwidth
,height
иmargin
.Если вы хотите добавить элемент
height
к<em>
элементу, вам нужно установить для этого элемента значениеdisplay: inline-block;
. Теперь вы можете добавитьheight
элемент и любой другой стиль блока (block
частьinline-block
), но он помещается в предложение (inline
частьinline-block
).источник
display
значений.В ответах не упомянуто, что встроенный элемент может разбиваться между строками, а встроенный блок не может (и, очевидно, блокируется)! Таким образом, встроенные элементы могут быть полезны для стилизации предложений текста и блоков внутри них, но, поскольку они не могут быть дополнены, вы можете использовать вместо этого высоту строки .
источник
Все ответы выше дают важную информацию о первоначальном вопросе. Однако есть обобщение, которое кажется неправильным.
Можно установить ширину и высоту как минимум для одного встроенного элемента (о котором я могу думать) -
<img>
элемента.И здесь, и в этом дубликате приняты оба ответа, что это невозможно, но это не похоже на действующее общее правило.
Пример:
img
Имеетdisplay: inline
, но егоwidth
иheight
были успешно установлены.источник
Ответ от splattne, вероятно, охватил большую часть всего, поэтому я не буду повторять одно и то же, но:
inline
иinline-block
вести себя по-разному соdirection
свойством CSS.В следующем фрагменте, который вы видите
one two
(по порядку), отображается, как это делается в макетах LTR. Я подозреваю, что браузер здесь автоматически определил английскую часть как текст LTR и отображал ее слева направо.Однако, если я продолжу и установлю
display
наinline-block
, браузер, похоже, будет уважать этоdirection
свойство и отображать элементы справа налево по порядку, чтобы ониtwo one
отображались.Я не знаю, есть ли другие причуды к этому, я только нашел об этом опытным путем на Chrome.
источник