为什么<a>元素继承子元素的大小

Question

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

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都出现这种情况，所以我假设它发生在所有浏览器中。这是一个错误？为什么它不是一个bug？

Answer 1

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

这不是一个错误。它只是CSS的本质，而且大多数浏览器都是以这种方式初始化两个元素的CSS属性。