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

Question

这是我的JsFiddle

当我检查与Chrome开发者工具锚标签的大小，它表明我144px*18px的第1个要素和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 规范说

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

<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默认display: inline 。 为了让anchor占据它的子空间，你必须给他一个display:block ，或者在这种情况下， display:inline-block以便它们将是inline和block 。

a{
    display:inline-block;
}

JSFiddle

阅读此问题了解更多信息。

Answer 4

a 标签也需要设置样式

我加了

.gallery a {
display: inline-block;
}

Answer 5

我有同样的问题，例如，我有由 GitHub 风格的 Markdown 生成的 HTML，所以我可以有包含带有图像的锚的段落。

实际上设置display: inline-block in anchors 对我不起作用； 我还设置了display: block in images。 使用 Sass 嵌套它看起来像这样：

.gallery {
  a {
      display: inline-block;

      img {
        display: block;
      }
  }
}

Answer 6

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

Answer 7

这些都不适合我。 所做的就是在锚点上放置一个z索引。 位置：绝对； z索引：2

Answer 8

另一种解决方案是在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;}对我来说不是一个选择，因为“要添加的东西”应该在图像下方，而其余的文本在之后，这会减少阅读流程。