额外的5px来自这个小提琴？

Question

我创造了这个看似简单的小提琴，发现包含div的y维度比我预期的高5px。

我不想修复5px，我想了解它的来源。我检查了检查员，图标和包含的div都有0个边距和填充。

http://jsfiddle.net/dy3qhv0L/

<style>
#icon_holder{
  border: 1px solid #ffffff;
}
.icon{
  border: 1px dotted #ffffff;  
}
</style>
<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>

Answer 1

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

修复在图标类中添加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;
}

Answer 2

图标显示为内联元素。设置vertical-align:top;

<强> CSS

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

Answer 3

你应该添加 -

<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>

和css -

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

Answer 4

您可以尝试这样做： Demo

空格是，因为默认情况下图片是内嵌元素，如果使用块并且在同一行中对齐，则可以使用 float as left < / strong>，你可以得到预期的结果。

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

有关详情，请参阅 link

Answer 5

uss css它将解决问题

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