Почему мой фоновый цвет не отображается, если у меня есть display: inline?

<html>
    <body>
       <div style="display: inline; background-color: #555;">
            <h3>test</h3>
       </div>
    </body>
</html>

Вот мой код Мне интересно, почему мой фоновый цвет не отображается. Если я изменю отображение css со встроенного на блокированное, то оно появляется. Почему он не отображается, если дисплей встроен? Я пытаюсь понять причину проблемы, кроме поиска решения.

Источник

6 ответов

Решение

Div не занимает места, если он встроен. если вы хотите встроенный элемент, который отображается как рост детей, то используйте display: inline-block;,

Что касается хорошей дискуссии, я бы поверил, что QuirksMode работает лучше, чем моя собственная. Суть в том, что inline элемент не отталкивает другие элементы с пути.

Источник

Проблема в том, что у вас есть H3, blocking elementвнутри inline element,

Вы можете увидеть, что происходит с:

h3
{
    background-color: inherit;   
}

или сделайте H3 встроенным:

h3
{
 display: inline;   
}
Источник

div это элемент блока по умолчанию. Изменение модели отображения элемента блока на встроенный не является хорошей практикой. заголовки тоже являются блочными элементами. Вложение блочного элемента во встроенный элемент недопустимо в формате HTML. Если вы хотите эффект подсветки (придание цвета фона тексту, а не целому блоку элементов), вам нужно использовать встроенный элемент, например span,

<html>
    <body>
       <div>
            <h3><span style="background-color: #555;">test</span></h3>
       </div>
    </body>
</html>
Источник

В последней редакции CSS2.1 сказано следующее:

Когда встроенный блок содержит блок уровня блока в потоке, встроенный блок (и его встроенные предшественники в одном и том же линейном блоке) разбиваются вокруг блока уровня блока (и любые дочерние элементы уровня блока, которые являются последовательными или разделяются только складные пробелы и / или элементы вне потока), разделяющие встроенный блок на два блока (даже если любая сторона пуста), по одному на каждой стороне блока (блоков) уровня блока. Строковые блоки до перерыва и после перерыва заключаются в анонимные блочные блоки, и блок уровня блока становится родственным из этих анонимных блоков. Когда на такой встроенный блок влияет относительное позиционирование, любой результирующий перевод также влияет на блок уровня блока, содержащийся во встроенном блоке.

Другими словами, с точки зрения компоновки, встроенная комбинация div и h3 образует встроенный блок, блок блока и другой встроенный блок. Только два встроенных блока принимают форматирование (т.е. цвет фона), а блок блока не образует какую-либо часть встроенного блока, определенного элементом div, и поэтому принимает настройку цвета фона по умолчанию (прозрачную, отображающуюся через фон). цвет содержащего его блока).

Источник

Простое решение, лучше всего в некоторых случаях добавить несколько отступов во встроенный div, содержащий ваш заголовок

<div style="display: inline; background-color: #555; padding:5px;">
<h3>test</h3>
</div>
Источник

Если вы пытаетесь создать эффект выделения, используйте нижеприведенное:

<h3><span style="background-color: #555;">test</span></h3>
Источник
Другие вопросы по тегам