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 File

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

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

Answer 2

CSS 2.1 spec说

框内容区域的尺寸 - 内容宽度和内容高度 - 取决于几个因素：是否元素生成盒子的宽度为“＃”;或者＆＃39;身高＆＃39;物业集，是否该框包含文本或其他框，框是否为表格等。箱体宽度和高度在视觉一章中讨论格式化模型细节。

<a>元素默认为显示值inline。其内容参与布局，因此它是non-replaced元素。

对于身高，规格说：

10.6.1 Inline, non-replaced elements

＆＃39;身高＆＃39;酒店不适用。内容区域的高度   应该基于字体，但是这个规范没有指定   如何。

因此18px来自单行文本，取自字体指标。较大的图像内容和包含的块大小都不起任何作用。

对于宽度，规范说

10.3.1 Inline, non-replaced elements

＆＃39;宽度＆＃39;酒店不适用。计算值为＆＃39; auto＆＃39;对于＆＃39; margin-left＆＃39;或者＆＃39; margin-right＆＃39;成为＆＃39; 0＆＃39;的使用价值。

换句话说，宽度由<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

Read this question for more info

Answer 4

a标签也需要设置样式

我添加了

.gallery a {
display: inline-block;
}

Answer 5

而不是在＆lt; a＆gt;上应用{display：inline-block}。，尝试在＆lt; a＆gt;的子项上应用{float：left}。＆lt; a＆gt;的高度。现在会匹配孩子的身高。

Answer 6

我遇到了同样的问题，例如，我有由GitHub风格的markdown生成的HTML，因此可以在段落中包含带有图像的锚点。

锚点中的精算设置- (void)windowDidLoad { [super windowDidLoad]; self.shouldCascadeWindows = YES; // Position at top left corner of main screen NSWindow *w = self.window; NSPoint pos = NSMakePoint (20, 40); // this is where the 1st window appears pos.y = NSScreen.mainScreen.frame.size.height - w.frame.size.height - pos.y; [w setFrame:CGRectMake(pos.x, pos.y, w.frame.size.width , w.frame.size.height) display:NO]; }对我不起作用，我也对图像设置了display: inline-block。使用Sass嵌套的东西看起来像这样：

display: block

Answer 7

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

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

7 个答案: