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 是一个内联 block 元素。将 a 元素的 css display 属性更改为 inline-block，您会注意到它们具有相同的大小。

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