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

Question

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

它看起来像下面这样:

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

          <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 个这样的数字并排放置。请帮忙，谢谢!

Answer 1

A <figure>默认情况下有边距，因此如果您希望其右边距和底部边距为 0，则必须在样式表中明确指定它们。

换句话说，替换

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

通过

margin:5px 0 0 1px;

参见 fiddle .

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