Html 为什么锚标签不取其包含元素的高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18585069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why anchor tag does not take height and width of its containing element
提问by shubendrak
Here is my JsFiddle
这是我的JsFiddle
When I inspect the size of the anchor tags with Chrome developer tools it shows me 144px*18pxfor the 1st element and 310px*18pxfor the 2nd element.
当我使用 Chrome 开发人员工具检查锚标记的大小时，它会显示144px*18px第一个元素和310px*18px第二个元素。
I want to know why it does not take the height and width of the containing element and how it is being calculated.
我想知道为什么它不采用包含元素的高度和宽度以及它是如何计算的。
.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>采纳答案by Alohci
The CSS 2.1 specsays
The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc. Box widths and heights are discussed in the chapter on visual formatting model details.
框的内容区域的尺寸——内容宽度和内容高度——取决于几个因素：生成框的元素是否设置了 'width' 或 'height' 属性，框是否包含文本或其他框，是否盒子是一个表格等。盒子的宽度和高度在可视化格式化模型细节一章中讨论。
The <a>element defaults to a display value of inline. Its contents participate in the layout so it is a non-replacedelement.
该<a>元素的默认显示值为inline。它的内容参与布局，所以它是一个non-replaced元素。
For height, the spec says:
对于高度，规范说：
10.6.1 Inline, non-replaced elements
The 'height' property does not apply. The height of the content area should be based on the font, but this specification does not specify how.
'height' 属性不适用。内容区域的高度应该以字体为基础，但是这个规范并没有具体说明如何。
So 18pxis arrived at from a single line of text, taken from the font metrics. Neither the larger image content, nor the containing block size plays any part.
So18px是从单行文本得出的，取自字体指标。较大的图像内容和包含的块大小都不起任何作用。
For width, the spec says
对于宽度，规范说
10.3.1 Inline, non-replaced elements
The 'width' property does not apply. A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
'width' 属性不适用。'margin-left' 或 'margin-right' 的 'auto' 计算值变为使用值 '0'。
in other words, the width is determined by the <a>element's contents, paddings, borders and margins.
换句话说，宽度由<a>元素的内容、内边距、边框和边距决定。
For the first <a>element that's 114px (contents - image plus one space) + 20px (left margin) + 2x5px (left and right border) = 144px
对于<a>114px（内容 - 图像加一个空格）+ 20px（左边距）+ 2x5px（左右边框）= 144px 的第一个元素
For the second <a>element that's 280px (contents - image) + 20px (left margin) + 2x5px (left and right border) = 310px
对于<a>280 像素（内容 - 图像）+ 20 像素（左边距）+ 2x5 像素（左右边框）= 310 像素的第二个元素
Just need to account for the spaces. The elements are being laid out in a line box in a inline context, so the spaces at the start of the first <a>element and at the end of the second <a>element are being dropped. The spaces at the end of the first <a>element and the start of the second <a>element are being collapsed into one space. When spaces are collapsed, it's always the first space which remains, which in this case is the one at the end of first <a>element, so that's why a space participates in the width of the first <a>element but not in the width of the second one.
只需要考虑空格。元素被放置在内联上下文中的行框中，因此第一个<a>元素开头和第二个<a>元素末尾的空格被删除。第一个<a>元素末尾和第二个<a>元素开头的空格被折叠成一个空格。当空格被折叠时，它总是剩下的第一个空格，在这种情况下是第一个<a>元素末尾的空格，这就是为什么一个空格参与第一个<a>元素的宽度而不是第二个元素的宽度。
回答by Roy Sonasish
use display:inline-blockin anchor
display:inline-block在锚中使用
.gallery a{
display:inline-block;
}
here is updated jsFiddle File
这是更新的jsFiddle 文件
also remove margin from image and add it to anchor
还从图像中删除边距并将其添加到锚点
.gallery a{
display: inline-block;
margin-left: 20px;
margin-top: 20px;
}
回答by Vucko
anchoris always display: inlineby default. To make anchortook it's child space, you must give him a display:block, or in this case, display:inline-blockso that they will be inlineand block.
anchor始终display: inline为默认值。为了让anchor他的孩子空间，你必须给他一个display:block，或者在这种情况下，display:inline-block这样他们就会是inline和block。
a{
display:inline-block;
}
回答by Anagio
The a tag's need to be styled as well
a 标签也需要设置样式
I added
我加了
.gallery a {
display: inline-block;
}
回答by Gianluca Casati
I had the same issue, for example, I have HTML generated by GitHub flavored markdown, so I can have paragraphs containing anchor with images inside.
我有同样的问题，例如，我有由 GitHub 风格的 Markdown 生成的 HTML，所以我可以有包含带有图像的锚的段落。
Actually setting display: inline-blockin anchors did not work for me; I did also set display: blockin images. Using Sass nested something it looks like this:
实际上设置display: inline-block锚对我不起作用；我也设置display: block了图像。使用 Sass 嵌套它看起来像这样：
.gallery {
a {
display: inline-block;
img {
display: block;
}
}
}
回答by Prashant Nair
Instead of applying {display: inline-block} on <a> , try applying {float: left} on the child of <a>. The height of the <a> would now match the height of the child.
不要在 <a> 上应用 {display: inline-block} ，而是尝试在 <a> 的孩子上应用 {float: left}。<a> 的高度现在将匹配孩子的高度。
