时间戳

首页 > 解决方案 > 为什么不显示：阻止元素集空间像其他元素一样被保留？

html - 为什么不显示：阻止元素集空间像其他元素一样被保留？

问题描述

img {
  background-color: lightblue;
  display: block;
}

.d1 {
  background-color: blue;
}

.s1 {
  background-color: orange;
  display: block;
}
<img src="https://placehold.it/50x20">
<div class="d1">Test1</div>
<span class="s1">Test2</span>

上面，我正在试验display: block;各种标签上的属性。我设置了它img，span但是，正如我所见，图像没有按原样延伸到最右边span……为什么会这样？泰

标签： htmlcssimagedisplay

解决方案

要获得准确的解释，您需要参考规范，更准确地说是处理块级替换元素的部分，因为img替换元素1的显示计算值等于块：

的使用值与width内联替换元素一样确定。然后应用非替换块级元素的规则来确定边距。参考

然后对于内联替换元素

如果height和width都具有 的计算值，auto并且元素也具有固有宽度，则该固有宽度是“宽度”的使用值。

您的图像具有等于的固有宽度，50px因此它将被使用。您只能通过明确指定不同的宽度来覆盖它（100%如果您想要全宽）

span并且div是不可替换的元素，因此它们的宽度定义如下：

在其他属性的使用值中必须保持以下约束：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

如果width设置为auto，则任何其他 'auto' 值将变为0并且 'width' 来自结果相等。参考

您将所有值设置为自动，因此我们将所有内容设为 0，并且我们会注意到width = width of containing block这是您的全宽行为。

在您的情况下，包含块基本上是父元素：

元素框的位置和大小有时是相对于某个矩形计算的，称为元素的包含块。元素的包含块定义如下：

...

  1. 对于其他元素，如果元素的位置是“相对”或“静态”，则包含块由最近的块容器祖先框的内容边缘形成。参考

1更多关于替换元素：

其内容超出 CSS 格式化模型范围的元素，例如图像或嵌入文档。例如，HTML img 元素的内容经常被其 src 属性指定的图像替换。被替换的元素通常具有固有尺寸：固有宽度、固有高度和固有比率。..参考

推荐阅读