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

Question

这是我的JsFiddle

当我使用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

display:inline-block在锚中使用

.gallery a{
    display:inline-block;
}

这里是更新的jsFiddle文件

还从图像中删除边距并将其添加到锚点

.gallery a{
    display: inline-block;
    margin-left: 20px;
    margin-top: 20px;
}

Answer 2

在CSS 2.1规范说

框的内容区域的尺寸 - 内容宽度和内容高度 - 取决于几个因素:生成框的元素是否具有"宽度"或"高度"属性集,框是否包含文本或其他框,是否盒子是一张桌子等.盒子的宽度和高度在视觉格式化模型细节的章节中讨论.

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

对于高度,规格说:

10.6.1内联,未替换元素

'height'属性不适用.内容区域的高度应基于字体,但此规范未指定方式.

所以18px从单行文本中得出,取自字体度量.较大的图像内容和包含的块大小都不起任何作用.

对于宽度,规格说

10.3.1内联,未替换元素

'width'属性不适用.'margin-left'或'margin-right'的'auto'的计算值变为'0'的使用值.

换句话说,宽度由<a>元素的内容,填充,边框和边距决定.

对于第一个<a>元素是114px(内容 - 图像加一个空格)+ 20px(左边距)+ 2x5px(左边框和右边框)= 144px

第二个<a>元素是280px(内容 - 图像)+ 20px(左边距)+ 2x5px(左边框和右边框)= 310px

只需要考虑空间.元素在内联上下文中的行框中布局,因此第一个<a>元素的开头和第二个<a>元素的末尾的空格被删除.第一个<a>元素末尾的空格和第二个<a>元素的开头被折叠成一个空格.当空间被折叠时,它总是第一个剩余的空间,在这种情况下是第一个<a>元素末尾的空间,这就是为什么空间参与第一个<a>元素的宽度而不是第二个元素的宽度.

Answer 3

anchor始终display: inline默认为.为了使它anchor成为孩子的空间,你必须给他一个display:block,或者在这种情况下,display:inline-block他们将成为inline和block.

a{
    display:inline-block;
}

的jsfiddle

阅读此问题以获取更多信息.