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

【问题标题】：Why don't <a> elements inherit size of child elements为什么 <a> 元素不继承子元素的大小
【发布时间】：2012-12-20 07:52:03
【问题描述】：

我有一个非常非常简单的 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 都会出现这种情况，所以我假设所有浏览器都会出现这种情况。这是一个错误？为什么不应该是一个错误？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：