为什么 HTML Div 标签之间有随机边距答案

【问题标题】：Why random margins between HTML Div tags为什么 HTML Div 标签之间有随机边距
【发布时间】：2015-04-02 01:23:05
【问题描述】：

我正在尝试使用 angularJS 循环填充 div 标签中的数据。

<div>
    <div class='box' ng-repeat="product in Products | filter:{'scid': SCId.toString()}:true | orderBy:'pname'">
        <br>
        <b>{{product.bname}}  </b>
        <br>{{ product.pname }}
        <br>
        <img src="http://localhost/{{ product.image_path }}" alt="" border=3 height=75 width=75></img>

    </div>
</div>

这是我的 CSS 类。

.box {
margin : 5px;
display : inline-block;
width: 150px;
height: 250px;
background-color: grey;
text-align:center;
}

但它没有正确渲染。（一些随机的顶部和底部边距）

有人可以帮助我做错什么吗？

【问题讨论】：

标签： html css angularjs

【解决方案1】：

这是由于vertical-align: middle 总是用display: inline-block;添加vertical-align: top;
第二个问题是未知边距，display: inline-block; 元素获取边距，将 font-size: 0 添加到其父级。 :)

ul {
  max-width: 500px;
  font-size: 0;
  margin: 0 auto;
}
ul > li {
  display: inline-block;
  width: 100px;
  height: 150px;
  background: black;
  margin: 5px;
  list-style: none;
  vertical-align: top;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

【讨论】：

【解决方案2】：

添加

vertical-align: top;

到你的 CSS

【讨论】：

【解决方案3】：

这是因为display:inline-block，默认设置为vertical-align:baseline，所以你需要设置vertical-align:top。

设置为inline-block 的元素与inline 非常相似，因为它将使用自然的文本流设置inline（在“baseline”上）。这不同之处在于您可以设置 width 和 height 这将受到尊重。

Source

加上display:inline-block会导致元素之间出现间隙，有一些解决方案可以解决：

删除空格
负边距
跳过结束标签
将字体大小设置为零

所以这是一个sn-p：

.box-wrapper {
  font-size: 0
}
.box {
  margin: 5px;
  display: inline-block;
  width: 150px;
  height: 250px;
  background-color: grey;
  text-align: center;
  vertical-align: top;
  font-size: 16px;
}

<div class="box-wrapper">
  <div class="box">this will be vertical aligned top</div>
  <div class="box">this will be vertical aligned top</div>
  <div class="box">this will be vertical aligned top</div>
</div>

【讨论】：