Я хочу понять, что происходит, когда элемент с CSS display:block является дочерним элементом DOM элемента, CSS которого display:inline (так что элемент блока является дочерним элементом встроенного элемента).
Эти сценарии описаны в разделе Анонимные блок-блоки для спецификации CSS 2.1: пример включает следующие правила...
body { display: inline }
p { display: block }
... и в сопроводительном тексте говорится...
Элемент BODY содержит кусок (C1) анонимного текста, за которым следует элемент уровня блока, за которым следует другой фрагмент (C2) анонимного текста. Результирующие поля будут анонимный блок-блок вокруг BODY, содержащий анонимный блок-блок вокруг C1, блок блока P и другой анонимный блок-блок вокруг C2.
Если у вас есть родительский элемент display:inline, и если у этого родителя есть дочерний элемент, который является display:block, то существование этого ребенка, по-видимому, приводит к тому, что родительский почти ведет себя как display:block, и игнорировать тот факт, что он определен как display:inline (в том, что родительский элемент теперь содержит только анонимные и не анонимные дочерние блоки, т.е. больше не содержит встроенных дочерних элементов)?
Мой вопрос в этом сценарии (где есть дочерний элемент display:block), каковы различия между родительским, определяемым display:inline вместо display:block?
Изменить: мне больше интересно понимать стандарт CSS 2.1, чем в том, как и на практике ли применяются различные реализации браузера.
2nd Edit:
Там одна разница, отмеченная в спецификации. В следующем документе граница для абзаца 2-го блока охватывает весь абзац и всю ширину страницы; в то время как граница для 1-го "встроенного абзаца" находится вокруг каждой строки (даже если есть несколько строк) внутри абзаца и не более, чем точная ширина каждой строки (каждая строка короче ширины страницы).
<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-width:1px;
display: inline;
}
p.two
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="one">Some text. <b>Note:</b> The "border-width"
property does not work if it is used alone. Use the
"border-style" property to set the borders first.</p>
<p class="two">Some text.</p>
</body>
</html>
Если я добавлю следующее правило стиля...
b
{
display: block;
}
... тогда "Примечание:" в первом встроенном абзаце становится блоком, который разделяет абзац (согласно спецификациям, первая и последняя часть абзаца теперь находятся в анонимном блоке). Тем не менее, граница вокруг первой и последней части абзаца по-прежнему остается "встроенными" границами: и, тем не менее, это не то же самое, что если p.one был объявлен display:block в первую очередь.
Вот цитата из спецификации, которая гласит:
Свойства, установленные на элементах, которые вызывают анонимные блок-блоки, которые будут сгенерированы по-прежнему применяются к ящикам и контенту этого элемента. Например, если граница была установлена на BODY элемент в приведенном выше примере, граница будет нарисована вокруг C1 (открыто в конце строки) и C2 (open в начале строки).
Является ли свойство border-style единственным типом свойства, в котором разница видна?
