为什么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添加到其父级。 ：）

＆＃13;
＆＃13;
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;
}
＆＃13;
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
＆＃13;
＆＃13;
＆＃13;

Answer 2

添加

vertical-align: top;

到你的CSS

Answer 3

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

  

设置为inline-block的元素与inline非常相似   将inline设置为自然的文本流（在＆＃34; baseline＆＃34;上）。该   区别在于您可以设置width和height   受到尊重。

Source

Plus display:inline-block导致元素之间存在差距，有一些解决方案可以解决这些问题：

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

Read more

所以这是一个片段：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;