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

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

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


html css inline
person user926958    schedule 16.09.2011    source источник
comment
См. также: stackoverflow.com/questions/3099030/   -  person fncomp    schedule 16.09.2011

Ответы (6)


arrow_upward
12
arrow_downward

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

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

person fncomp    schedule 16.09.2011
comment
+1, красиво. встроенный блок, скорее всего, то, чего хотел ОП. - person Joe; 16.09.2011
comment
Я пытаюсь понять причину проблемы, а не искать решение. Можете ли вы объяснить более подробно о проблеме? Вы имеете в виду, что если он встроенный, то он не может определить ширину h3, поэтому он рисует ширину 0? - person user926958; 16.09.2011
comment
Я понимаю, что элемент занимает столько места, сколько нужно, чтобы показать его > * в той же строке, например. текст. Извините, мои познания в CSS заканчиваются там, где они больше не помогают правильно оформить страницу, но виджет в нижней части ссылки QuirksMode должен упростить понимание. - person fncomp; 16.09.2011

arrow_upward
2
arrow_downward

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

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

h3
{
    background-color: inherit;   
}

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

h3
{
 display: inline;   
}
person Joe    schedule 16.09.2011
comment
Извините, пришлось что-то сказать, так как я засмеялся во второй раз. Мне нравится это имя :-) - person fncomp; 16.09.2011

arrow_upward
2
arrow_downward

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

<html>
    <body>
       <div>
            <h3><span style="background-color: #555;">test</span></h3>
       </div>
    </body>
</html>
person Mohsen    schedule 16.09.2011
comment
Это правильный, краткий и исчерпывающий ответ, и он должен быть принятым. - person Arta; 26.08.2019

arrow_upward
1
arrow_downward

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

<div style="display: inline; background-color: #555; padding:5px;">
<h3>test</h3>
</div>
person Fahad Ur Rehman    schedule 16.09.2011

arrow_upward
1
arrow_downward

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

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

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

person Alohci    schedule 16.09.2011

arrow_upward
0
arrow_downward

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

<h3><span style="background-color: #555;">test</span></h3>
person Reina    schedule 16.09.2011