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

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

另一种解决方案是使用带有img 元素的负margin-bottom 属性（大小取决于字体，因此，最好使用@font 规则来确定使用的字体，0.2em 很好此外，对于我使用的字体，使用 em 单位是一个好主意，因为大小取决于字体，因此，如果稍后更改字体大小，则不必更改此 CSS 代码）：

HTML：

Something, <a href="#"><img src="whatever.png" alt="Whatever" /></a>, something else.

CSS：

a:link {
 display: inline-block;
}
img {
 margin-bottom: -0.2em;
}

这样，所有文本都与图像很好地对齐，无论它是否在链接中，我都这样做是为了让所有图像 + 文本块以相同的方式显示，但您可以使用 a > img 而不是只是上面代码中的img。

顺便说一句，我想出了这个解决方案，因为我有类似的东西：

a[something]:link::after {
 content=" something to add"
}

所以，img {display: block;} 对我来说不是一个选项，因为“要添加的东西”会在图像下方，其余的文字会在之后，这会切断阅读流程。

Answer 2

我有同样的问题，例如，我有 GitHub 风格的降价生成的 HTML，所以我可以有包含锚点的段落，里面有图像。

实际上在锚点中设置display: inline-block 对我不起作用；我还在图片中设置了display: block。使用 Sass 嵌套的东西看起来像这样：

.gallery {
  a {
      display: inline-block;

      img {
        display: block;
      }
  }
}

Answer 3

而不是在 上应用 {display: inline-block} ，尝试在 的子级上应用 {float: left}。 的高度现在将与孩子的高度匹配。

Answer 4

a 标签也需要设置样式

我加了

.gallery a {
display: inline-block;
}

Answer 5

CSS 2.1 spec 说

盒子内容区域的尺寸——内容宽度和 内容高度——取决于几个因素：元素是否 生成框是否设置了“宽度”或“高度”属性 该框包含文本或其他框，框是否为表格等。 盒子的宽度和高度在视觉一章中讨论 格式化模型细节。

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

对于高度，规范说：

10.6.1 Inline, non-replaced elements

“高度”属性不适用。内容区域的高度 应以字体为准，但本规范未规定 如何。

所以18px 是从单行文本中得出的，取自字体指标。较大的图像内容和包含的块大小都不起作用。

对于宽度，规范说

10.3.1 Inline, non-replaced elements

“宽度”属性不适用。 'margin-left' 或 'margin-right' 的计算值 'auto' 变为使用值 '0'。

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

对于第一个 <a> 元素，它是 114px（内容 - 图片加一个空格）+ 20px（左边距）+ 2x5px（左右边框）= 144px

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

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

Answer 6

anchor 默认总是display: inline。要使anchor 占用它的子空间，您必须给他一个display:block，或者在这种情况下，display:inline-block，这样它们将是inline和block。

a{
    display:inline-block;
}

JSFiddle

Read this question for more info.

Answer 7

在锚点中使用display:inline-block

.gallery a{
    display:inline-block;
}

这里更新jsFiddle File

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

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