html - 为什么 HTML Div 标签之间的边距随机

Question

我正在尝试使用 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;
}

但它没有正确渲染。 (一些随机边距顶部和底部)

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

Answer 1

1. 这是由于 vertical-align: middle 始终添加 vertical-align: top; 和 display: inline-block;

2. 第二个问题是边距未知，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>