为什么锚标记不包含其包含元素的高度和宽度

Question

当我使用Chrome开发人员工具检查定位标记的大小时，它会向我显示144px*18px第一个元素和310px*18px第二个元素。

我想知道为什么它不包含包含元素的高度和宽度以及它是如何计算的。

.gallery {

    background-color: #abcdef;

}

.gallery img {

    display: inline-block;

    margin-left: 20px;

    margin-top: 20px;

}

.normal {

    height: 160px;

    width: 110px;

    border: 5px solid black;

}

.wide {

    height: 160px;

    width: 280px;

    border: 5px solid black;

}


<div class="gallery">

    <a href="#"> <img class="normal" src=""> </a>

    <a href="#"> <img class="wide" src=""> </a>

</div>

Answer 1

在CSS 2.1规范说

框内容区域的尺寸（内容宽度和内容高度）取决于几个因素：生成框的元素是否设置了“宽度”或“高度”属性，该框是否包含文本框或其他框，是否框是一个表格，等等。框的宽度和高度将在有关可视格式模型详细信息的章节中进行讨论。

所述<a>元件默认的显示值inline。它的内容参与布局，因此它是一个non-replaced元素。

对于高度，规格说明：

10.6.1内联非替换元素

‘height’属性不适用。内容区域的高度应基于字体，但是此规范未指定如何。

因此18px，是从字体度量中得出的单行文本得出的。较大的图像内容或包含的块大小都不起作用。

对于宽度，规范说

10.3.1内联非替换元素

‘width’属性不适用。“左边距”或“右边距”的“自动”计算值变为使用值“ 0”。

换句话说，宽度由<a>元素的内容，填充，边框和边距确定。

对于第一个<a>元素为114像素（内容-图像加一个空格）+ 20像素（左边距）+ 2x5像素（左右边框）= 144像素

对于第二个<a>元素，即280px（内容-图片）+ 20px（左侧边距）+ 2x5px（左右边框）= 310px

只需要考虑空间。元素是在嵌入式上下文中的行框中布置的，因此将删除第一个<a>元素的开头和第二个<a>元素的结尾处的空格。第一个<a>元素的末尾和第二个<a>元素的开始处的空间被折叠为一个空间。当空格折叠时，始终是第一个空格，在这种情况下，它是第一个<a>元素末尾的那个，因此这就是为什么空格参与第一个<a>元素的宽度而不参与第二个元素的宽度的原因。