Question

具有display：inline-block的元素的background-color属性不会更改内容的背景颜色。

我知道我们是否要进行display：block-元素尊重宽度和高度并覆盖容器的宽度如果元素为display：inline-元素的高度和宽度属于内容。根据我的理解，在display：inline-block中，元素应考虑宽度和高度，但是如果内容超出给定的高度，则background-color属性应跨越内容以充当inline元素。在代码中，background-color属性应跨越Span3和Span4的内容，但不能。另外，要添加到问题中，如果我将vertical-align：top添加到span3和span4，它们将对齐，但如果不对齐，则Span3将不对齐。我读到内联元素使wrt与基线对齐，但是在这种情况下，它们没有包装在任何元素中。

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;

}

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

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

Answer 1

您不能更改内联元素的高度。同样，您不能将inline-top，margin-bottom与内联元素一起使用。如果将inline元素更改为inline-block，则其行为类似于inline，但其高度和margin-top margin-bottom。要对齐它们，请使用垂直对齐。并且不要忘记html中元素之间的空间。在示例中，第一和第二div的宽度等于换行。但由于文本节点（空格），我们遇到了问题。只是在第一和第二之间注释空格 <div class="first"></div><div class="second"></div>。但是最好的办法是使用flex或grid而不用考虑内联块

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

CSS显示为内联块，background-color属性不覆盖内容

1 个答案: