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

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

9 голосов
/ 16 сентября 2011 
<html>
    <body>
       <div style="display: inline; background-color: #555;">
            <h3>test</h3>
       </div>
    </body>
</html>

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

Ответы [ 6 ]

9 голосов
/ 16 сентября 2011

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

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

2 голосов
/ 16 сентября 2011

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

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

h3
{
    background-color: inherit;   
}

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

h3
{
 display: inline;   
}
1 голос
/ 16 сентября 2011

В последней редакции CSS2.1 есть что сказать по этому вопросу:

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

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

1 голос
/ 16 сентября 2011

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

<div style="display: inline; background-color: #555; padding:5px;">
<h3>test</h3>
</div>
0 голосов
/ 16 сентября 2011

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

<html>
    <body>
       <div>
            <h3><span style="background-color: #555;">test</span></h3>
       </div>
    </body>
</html>
0 голосов
/ 16 сентября 2011

Если вы пытаетесь создать эффект подсветки, используйте вместо этого: 

<h3><span style="background-color: #555;">test</span></h3>
...