html - CSS 显示为 inline-block，background-color 属性不覆盖内容

Question

带有 display:inline-block 的元素的背景颜色属性不会改变内容的背景颜色。

我知道我们是否让 display:block - 元素尊重宽度和高度并覆盖容器的宽度如果元素是 display:inline - 元素的高度和宽度是内容。根据我的理解，使用 display: inline-block，元素应该尊重宽度和高度，但是如果内容溢出给定的高度，背景颜色属性应该跨越内容以表现为内联元素。在代码中 background-color 属性应该跨越 Span3 和 Span4 的内容，但它没有。另外，要添加到问题中，如果我将 vertical-align: top 添加到 span3 和 span4 它们会对齐，但如果没有，则 Span3 不会对齐。我读到内联元素与基线对齐，但在这种情况下，它们没有包含在任何元素中。

https://jsfiddle.net/ankita7/vah5xqe9/45/

<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;

}

inline-block 元素的 height 属性是否表现得像块元素而不是 inline 元素？我们总是使用 vertical-align 属性来对齐 inline-block 元素还是有任何例外？

.h1 {
  background-color: pink
}

.p1 {
  background-color: grey;
}

.span1 {
  background-color: black;
  color: white;
  width: 100px;
  height: 200px;
}

.span2 {
  background-color: yellow;
}

.p2 {
  background-color: green;
  display: inline;
}

.p3 {
  background-color: lightblue;
  width: 200px;
  height: 300px;
  display: block;
}

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

<h2 class="h1">
  h2 = Block and Inline-Block
</h2>
<p class="p1">
  p1 = This is block element. Block elements height is equal to their content height but they take whole width of the container.
</p>
<span class="span1">
    Span1 =This  is inline element. For inline elements width and height is equal to content's width and height. If you put width or height property on the element that doesn't apply to the element. 
    See the background-color: black doesn't take the width of the container.
  </span>
<span class="span2">
    Span2 = inline elements aligns side by side from left
  </span>
<p class="p2">
  P2 = To make block element behave like inline element i.e. make them align side by side. add display: inline; property to the block element.
</p>
<span class="p3">
    P3 - To make inline element behave like a block element. i.e. respect the width and height property. add display: block property to the inline element.
  </span>
<br/>
<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>

标签： htmlcssdisplay

Answer 1

您不能更改内联元素的高度。此外，您不能将 margin-top、margin-bottom 与内联元素一起使用。如果将 inline 元素更改为 inline-block，它的行为类似于 inline，但具有高度和 margin-top margin-bottom。对齐它们使用垂直对齐。并且不要忘记 html 中元素之间的空间。在示例中，第一个和第二个 div 的宽度等于换行。但是由于文本节点（空格），我们遇到了问题。只是在 first 和 second 之间的评论空间 <div class="first"></div><!-- --><div class="second"></div>。但最好的主意是使用 flex 或 grid 并忘记 inline-block

.wrap {
			width: 600px;
			height: 600px;
			background-color: green;
		}
.first, .second {
      width: 300px;
      height: 600px;
      display: inline-block;
      background-color: red;
}

<div class="wrap">
		<div class="first"></div>
		<div class="second"></div>
</div>