67

这是我的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>

4

7 回答 7

51

用于display:inline-block锚点

.gallery a{
    display:inline-block;
}

这里是更新的jsFiddle 文件

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

.gallery a{
    display: inline-block;
    margin-left: 20px;
    margin-top: 20px;
}
于 2013-09-03T06:00:24.277 回答
51

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>114 像素（内容 - 图像加一个空格）+ 20 像素（左边距）+ 2x5 像素（左右边框）= 144 像素的第一个元素

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

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

于 2013-09-03T07:17:15.663 回答
10

anchor总是display: inline默认的。要让anchor他的孩子空间，你必须给他一个display:block，或在这种情况下，display:inline-block这样他们将是inline和block。

a{
    display:inline-block;
}

JSFiddle

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

于 2013-09-03T06:00:34.543 回答
4

a 标签也需要设置样式

我添加了

.gallery a {
display: inline-block;
}
于 2013-09-03T06:00:47.263 回答
1

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

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

.gallery {
  a {
      display: inline-block;

      img {
        display: block;
      }
  }
}
于 2019-04-16T20:52:47.520 回答
0

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

于 2016-06-07T07:22:23.853 回答
0

另一种解决方案是对元素使用负margin-bottom属性img（大小取决于字体，因此，最好使用@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;}对我来说不是一个选项，因为“要添加的东西”会在图像下方和后面的其余文本，这会切断阅读流程。

于 2021-05-19T20:22:32.613 回答