Html 这把小提琴的额外5px是从哪里来的？

我创建了这个看似简单的提琴，发现包含的div的y维度比我预期的要多5px

我不想修复5px，我想知道它是从哪里来的。我检查了inspector，图标和包含的div都有0边距和填充

#图标固定器{
边框：1px实心#ffffff；
}
.图标{
边框：1个点#ffffff；
}

这些元素是内联块-因此它们与文本一起流动并位于基线上，额外的像素来自行高

要修复这个问题，请在icon类中添加float:left样式。 之后必须添加clear元素-最简单的css：

#icon_holder {
    border: 1px solid #ffffff;
}
#icon_holder:after {
    content: '';
    display:block;
    clear:both;
}
.icon{
    border: 1px dotted #ffffff;
    clear:both;
}

---

图标显示为内联元素。设置

垂直对齐：顶部

CSS

.icon{
 border: 1px dotted #ffffff; 
 vertical-align: top;
}

你应该加上-

<div id="icon_holder">
  <img class="icon" src="http://www.arcmarks.com/web/images/icon_facebook.png"><!--
  --><img class="icon" src="http://www.arcmarks.com/web/images/icon_google.png">
</div>

您可以这样尝试：

因为默认情况下图像是一个内联元素，所以空间在那里，如果您使用块，并且为了在同一行中对齐，您可以使用左浮动，您可以得到预期的结果

#icon_holder {
    clear:both;
    border: 1px solid #ffffff;
    display:block;
    overflow:hidden;
}
.icon {
    border: 1px dotted #ffffff;
    display:block;
    float:left;
}

欲了解更多信息，请参阅这篇将解决此问题的uss css

.icon {
    border: 1px dotted #ffffff;
    vertical-align: top;
    display: inline-block;
}

但是为什么是5px，这个数字来自哪里？@cadegalt-它来自于将字体大小属性应用于字体的度量。使用不同的字体，你可以得到不同的间距。但是为什么是5px，这个数字来自哪里？问题是关于y维度，而不是x维度！更正了我的答案-感谢您指出我的误解，这不是一个真正的答案，但浏览器呈现的文本（和内联图像）有间隙（如字母和行距）。您可以通过将父div上的字体大小设置为0来删除此选项。@box-这就是修复方法，如果您需要，我会将其作为一个答案，但是为什么字体大小会影响我的div，因为其中没有文本！这是多么疯狂！这并没有回答问题答案在上面的评论中，这只是一个重新设置浏览器的问题。
#icon_holder {
    clear:both;
    border: 1px solid #ffffff;
    display:block;
    overflow:hidden;
}
.icon {
    border: 1px dotted #ffffff;
    display:block;
    float:left;
}

.icon {
    border: 1px dotted #ffffff;
    vertical-align: top;
    display: inline-block;
}