为什么锚点标记不采用其包含元素的高度和宽度 [英] Why anchor tag does not take height and width of its containing element
问题描述
这是我的 JsFiddle
当我检查锚标记的大小，Chrome开发者工具它显示我 144px * 18px 用于第一个元素， 310px * 18px 用于第二个元素。
Here is my JsFiddle
when i inspect the size of anchor tag which chrome developer tools it shows me 144px*18px for 1st element and 310px*18px for 2nd element.
我想知道为什么它不包含元素的高度和宽度以及如何计算。
I want to know why it does not take height and width of containing element and how it is being calculated.
HTML
<div class="gallery">
<a href="#"> <img class="normal" src=""> </a>
<a href="#"> <img class="wide" src=""> </a>
</div>
CSS
.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;
}
推荐答案
框的内容区域的尺寸 - 内容宽度和
内容高度 - 取决于几个因素：生成框的元素
是否具有宽度 'height'属性集，无论
框包含文本框还是其他框，框是否为表等。
框宽和高度在可视化
格式化模型细节的章节中讨论。
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.
< a> 元素默认为显示值 inline 。它的内容参与布局，所以它是一个非替换元素。
The <a> element defaults to a display value of inline. Its contents participate in the layout so it is a non-replaced element.
'height'属性不适用。内容区域的高度
应基于字体，但此规范不指定
如何。
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.
因此 18px 是从单行文本中获取的，取自字体度量。较大的图像内容和包含块大小都不起任何作用。
So 18px is 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.
对于宽度，规范说
'width'属性不适用。 margin-left或margin-right的auto的计算值变为使用值0。
The 'width' property does not apply. A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
换句话说，宽度由< a> 元素的内容，paddings，边框和边距决定。
in other words, the width is determined by the <a> element's contents, paddings, borders and margins.
对于第一个< a> 元素为114px（内容 - 图片加一个空格）+ 20px margin）+ 2x5px（left and right border）= 144px
For the first <a> element that's 114px (contents - image plus one space) + 20px (left margin) + 2x5px (left and right border) = 144px
对于第二个< a> （contents-image）+ 20px（left margin）+ 2x5px（left and right border）= 310px
For the second <a> element that's 280px (contents - image) + 20px (left margin) + 2x5px (left and right border) = 310px
只需要考虑空格。元素被放置在内联上下文中的行框中，所以第一个< a> 元素开始处的空格和第二个< a> 元素。元素的第一个< a> 结尾处的空格和第二个< a> 元素的开头正在被折叠成一个空间。当空格被折叠时，它总是第一个空格，在这种情况下是第一个< a> 元素的结尾，这就是为什么空格参与在第一个< a> 元素的宽度，而不在第二个宽度。
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.
这篇关于为什么锚点标记不采用其包含元素的高度和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
