无法理解带有图形标签 HTML5 的空间要求答案

【问题标题】：Unable to understand space requirements with figure tag HTML5无法理解带有图形标签 HTML5 的空间要求
【发布时间】：2014-05-10 04:07:09
【问题描述】：

我正在处理一个使用 HTML5 的页面，该页面需要使用 4 个在水平线上彼此相邻放置的图形标签。每个图形标签都包含一个图像，该图像包含一个 80X80 像素的图标，图像下方是一个标题。

它看起来像下面这样：

问题：使用开发人员工具，当我将鼠标悬停在图形标签上时，它显示的尺寸为 80 像素 x 120 像素，考虑到图标+标题的组合，这很好。但是，可以在快照中看到它在渲染时实际在做什么。它占用了一些额外的空间（宽度显示为 80 像素，但它使用的不止于此！）这将相邻的图形推到了比它需要的更远的右侧。代码 sn-p 如下所示：

          <div id="figureIcons">
                <a href="" class="extLinks" target="_blank">
                    <figure class="icons">
                        <img class="linksIcons" src="icons/chrome_link.png" title="Website">
                        <figcaption><b>HomePage</b><br />(Website)</figcaption>
                    </figure>
                </a>

                <a href="" class="extLinks" target="_blank">
                    <figure class="icons">
                        <img class="linksIcons" src="icons/linkedin_link.png" title="LinkedIn Profile">
                        <figcaption><b>Profile</b><br />(LinkedIn)</figcaption>
                    </figure>
                </a>
         </div>

用于上述排列的唯一 CSS：

figure.icons
{
    position:relative; 
    float:left;
    margin-top: 5px;
    margin-left: 1px;
}

以上是唯一与问题相关的css。样式表中尚未使用其他分配的类/ID。

我哪里错了？我该如何解决？我需要将 4 个这样的数字并排放置。请帮忙，谢谢！

【问题讨论】：

类是什么样的？即figureIcons、extLinks、icons、linksIcons。

标签： css html layout space figure

【解决方案1】：

<figure> 默认有边距，所以如果你想让它的右边距和下边距为 0，你必须在样式表中明确指定它们。

换句话说，替换

margin-top: 5px;
margin-left: 1px;

通过

margin:5px 0 0 1px;

见fiddle。

当您查看尺寸时，Inspector 不将边距添加到宽度的原因是，从技术上讲，边距不是元素的一部分；他们在外面。（如果你要给它一个填充，它会被添加到宽度中。）

【讨论】：