Html CSS显示为内联块，背景色属性不'；我不包括内容

带有display:inline块的元素上的“背景色”属性不会更改内容的背景色

我知道如果我们显示：块-元素尊重宽度和高度，覆盖容器的宽度 如果元素为display:inline-则元素的高度和宽度为内容的宽度。 根据我的理解，对于display:inline块，元素应该考虑宽度和高度，但是如果内容溢出了给定的高度，则background color属性应该跨越内容以作为内联元素。 在代码中，background color属性应跨越Span3和Span4的内容，但它不是。 另外，如果我将垂直对齐添加到问题中：顶部与span3和span4对齐，但如果不对齐，则span3不对齐。 我了解到内联元素将wrt与基线对齐，但在本例中，它们没有包装在任何元素中

内联块元素的“高度”属性的行为是否类似于块元素而不是内联元素？ 我们是否总是使用垂直对齐属性来对齐内联块元素，或者有任何例外

.h1{
背景颜色：粉红色
}
.p1{
背景颜色：灰色；
}
.span1{
背景色：黑色；
颜色：白色；
宽度：100px；
高度：200px；
}
.span2{
背景颜色：黄色；
}
.p2{
背景颜色：绿色；
显示：内联；
}
.p3{
背景颜色：浅蓝色；
宽度：200px；
高度：300px；
显示：块；
}
.span3，
.span4{
背景颜色：橙色；
宽度：300px；
高度：200px；
显示：内联块；
}

h2=块和内联块

p1=这是块元素。块元素的高度等于其内容高度，但它们占据容器的整个宽度。

Span1=这是内联元素。对于内联元素，宽度和高度等于内容的宽度和高度。如果在不应用于图元的图元上放置了“宽度”或“高度”属性。
请参见背景色：黑色不占容器的宽度。
Span2=内联元素从左侧并排对齐

P2=使块元素的行为类似于内联元素，即使它们并排对齐。添加显示：内联；属性设置为块元素。

P3-使内联元素的行为类似于块元素。i、 e.尊重宽度和高度属性。将“显示：块”特性添加到内联元素。


Span3-使内联元素的行为既像内联元素又像块元素。i、 e.并排对齐，并尊重宽度和高度属性。
将“显示：内联块”用于内联元素。
内联元素与最右侧元素的基线对齐。要对齐其顶部，请使用垂直对齐：顶部属性
Span4-span3和Span4现在都作为内联元素和块元素
Span3-使内联元素的行为既像内联元素又像块元素。i、 e.并排对齐，并尊重宽度和高度属性。
将“显示：内联块”用于内联元素。
内联元素与最右侧元素的基线对齐。要对齐其顶部，请使用垂直对齐：顶部属性

不能更改内联元素的高度。此外，不能将页边距顶部、页边距底部与内联元素一起使用。若将“内联”元素更改为“内联”块，则其行为类似于“内联”，但具有“高度”和“上边缘-下边缘”。要对齐它们，请使用垂直对齐。不要忘记html中元素之间的间距。 在本例中，第一个和第二个div的宽度等于wrap。但我们有一个问题，因为文本节点（空间）。只需注释第一个和第二个之间的空格

。 但最好的办法是使用flex或grid，忘记内联块

.wrap{
宽度：600px；
高度：600px；
背景颜色：绿色；
}
.第一，.第二{
宽度：300px；
高度：600px；
显示：内联块；
背景色：红色；
}

根本不清楚你在问什么。。。但是，如果内容溢出了给定的高度，那么背景色属性应该跨越内容，以表现为内联元素，这是什么意思。你所说的内容是什么意思？背景（无论元素的类型是什么）将覆盖元素及其内容保持简短，您希望最后有什么？我希望背景颜色跨越元素内文本（内容）的高度。因此，它在必要时尊重内联属性。似乎不是这样，如果指定了高度，元素高度是固定的，除非高度是自动的。@ankita-这是正确的。背景应用于边框框，而不是文本内容。文本内容在某些情况下会影响边框框的大小，但这是其效果的极限。感谢Vasyl的解释。

<span class="span3">
    Span3 - To make inline element behave like both inline and block element. i.e. align side by side and respect the width and height property. 
    use display: inline-block to the inline element.  
    inline elements aligns themselves with respect to the baseline of the rightmost element. To align their top use vertical-align: top property
  </span>

<span class="span4">
    Span4 - Both span3 and span4 now behaves as inline and block elements
    Span3 - To make inline element behave like both inline and block element. i.e. align side by side and respect the width and height property. 
    use display: inline-block to the inline element.  
    inline elements aligns themselves with respect to the baseline of the rightmost element. To align their top use vertical-align: top property
  </span>
</code>

<code>
.span3,
.span4 {
  background-color: orange;
  width: 300px;
  height: 200px;
  display: inline-block;

}