html - 为什么元素不继承子元素的大小

Question

我有非常非常简单的 html，通常 HTML 中的所有内容似乎都可以正常工作，但在这种情况下，它不会。我认为 a 标签的大小应该继承一个子图像标签。但是在下面的情况下，大小是不同的。

html:

<a href="."><img src="some image"></a>​

CSS：

a {
    border: 1px solid #000;
    width: auto;
    height: auto;
}

img {
    border: 1px solid #F00;
}
​

为什么不<a>继承图像的大小？（见：http: //jsfiddle.net/49ykj/）

到目前为止，这发生在 Firefox 和 Chrome 中，所以我假设它发生在所有浏览器中。这是一个错误？为什么它不应该是一个错误？

Answer 1

发生这种情况是因为a它是一个内联元素，而img它是一个内联块元素。将元素的 cssdisplay属性更改a为 inline-block ，您会注意到它们具有相同的大小。

这不是一个错误。它只是 css 的本质以及大多数浏览器以这种方式初始化两个元素 css 属性的事实。