В чем разница между дисплеем: встроенным и дисплеем: встроенным блоком?

607

Что же представляет собой разницу между inlineи inline-blockзначений CSS display?

Логеш Пол
источник

Ответы:

1351

Визуальный ответ

Представьте себе <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
splattne
источник
6
Отличная интуиция. Таким образом, единственное отличие состоит в том, что атрибут высоты встроенных элементов не может быть установлен?
user2316667
7
@ user2316667 и ширина
Оскар Кальдерон
2
@ user2316667 и @OscarCalderon: также, встроенные элементы не заботятся о вертикальных полях и отступах, и следующий элемент будет размещен на той же строке (после нее не будет разрыв строки). элементы блока, такие как as p, divполучают всю ширину линии (форсируют разрыв строки), но учитывают ширину / высоту и все горизонтальные / вертикальные отступы / поля. Элементы inline-block имеют то же поведение, что и block, но без полного
переноса
1
padding-top и padding-right также влияют на эффект отображения встроенного элемента, вызывая некоторую путаницу.
tomwang1013
2
@ manuman94 Нет, это не значит. Существуют варианты использования для всех типов дисплея.
Сплаттне
126

display: inline;режим отображения для использования в предложении Например, если у вас есть абзац и вы хотите выделить одно слово, которое вы делаете:

<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>

<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).

Wouter J
источник
11
Отличный ответ! tl; dr - если вы хотите изменить размер встроенных элементов, вы можете использовать встроенный блок в качестве типа отображения.
errorprone
7
Небольшая поправка: встроенные элементы могут иметь горизонтальное поле (справа, слева), но не вертикальное поле (вверху, внизу)
whyleee
1
Хороший ответ, потому что вы упомянули о том, что мы можем / не можем делать при выборе одного из displayзначений.
ha9u63ar
14

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

<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr/>
<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline-block; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

введите описание изображения здесь

Али
источник
6

Все ответы выше дают важную информацию о первоначальном вопросе. Однако есть обобщение, которое кажется неправильным.

Можно установить ширину и высоту как минимум для одного встроенного элемента (о котором я могу думать) - <img>элемента.

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

Пример:

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
<img src="#" />

imgИмеет display: inline, но его widthи heightбыли успешно установлены.

alexandros84
источник
2
На самом деле, img-tag имеет display-inline в качестве значения по умолчанию для отображения. Вот почему можно установить ширину и высоту.
Алекс
img - это встроенный элемент -> developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements ... Так что в основном вы говорите более или менее точно то же самое, что я говорю, и вы отрицаете ??
alexandros84
7
Нет я не. img-теги являются «заменяемыми элементами», что в основном означает, что содержимое заменяется, поэтому оно ведет себя как элемент inline-block. И да, фактическое свойство по умолчанию (вычисляемое браузером свойство является встроенным). Но единственная причина этого заключается в том, что встроенный блок не был введен до CSS2, и для него существует «встроенный элемент, ведущий себя как элемент встроенного блока», поскольку он заменяется своим содержимым. т.е. вы не устанавливаете высоту / ширину для элемента, вы устанавливаете его для его содержимого - Wierd, да. Я знаю. drafts.csswg.org/css2/conform.html#replaced-element
Алекс
Это действительно интересно, что вы говорите. Дайте мне немного времени, чтобы исследовать и отредактировать, и, возможно, вместо этого убрать понижающее и повышенное голоса! В конце концов, я, честно говоря, уже чувствую, что эта дискуссия способствует полноте всей дискуссии.
alexandros84
1

Ответ от splattne, вероятно, охватил большую часть всего, поэтому я не буду повторять одно и то же, но: inlineи inline-blockвести себя по-разному со directionсвойством CSS.

В следующем фрагменте, который вы видите one two(по порядку), отображается, как это делается в макетах LTR. Я подозреваю, что браузер здесь автоматически определил английскую часть как текст LTR и отображал ее слева направо.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline;
}
<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Однако, если я продолжу и установлю displayна inline-block, браузер, похоже, будет уважать это directionсвойство и отображать элементы справа налево по порядку, чтобы они two oneотображались.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline-block;
}
<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

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

OverCoder
источник