爲什麼<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屬性。