Bootstrap 3 列内部有奇怪的空间答案

【问题标题】：Bootstrap 3 column has weird space insideBootstrap 3 列内部有奇怪的空间
【发布时间】：2019-01-11 22:34:49
【问题描述】：

我正在尝试在一行和一列中显示 2 个图像。我不希望列内有任何顶部/底部空格。我该怎么做？

img {
 vertical-align: top!important; 
}
.col-md-6 {
	border: 1px solid black;    
}

<!DOCTYPE html>
<html>
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
  <div class="row">
  	<div class="col-md-6">
    	<img src="https://via.placeholder.com/13x11/">
        <img src="https://via.placeholder.com/77x12/" style="margin: 0 0 0 7px">
    </div>
  </div>
</div>
</body>
</html>

该列的高度为 26 像素，但应该只有 12 像素。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

要删除不需要的间距，您可以将line-height: 0; 添加到您的 div 中，如下所示：

 <div class="col-md-6" style="line-height: 0">
       <img src="https://via.placeholder.com/13x11/">
       <img src="https://via.placeholder.com/77x12/" style="margin: 0 0 0 7px">
</div>

您可以找到对此行为的解释here。

【讨论】：

抱歉，我说的是顶部/底部空间。如果你运行这个例子，你可以看到图片后面有一个很大的空间

【解决方案2】：

这是因为默认的 line-height 约为。 20px + 2px 边框

【讨论】：