爲什麼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

添加

vertical-align: top; 

你的CSS

Answer 2

1. 這是由於vertical-align: middle 總是display: inline-block;

2. 第二個問題是未知的空間，display: inline-block;元素獲得利潤，增加加vertical-align: top;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>

Answer 3

這是因爲display:inline-block，是默認設置爲vertical-align:baseline，所以你需要設置vertical-align:top。

設置爲inline-block元素是因爲它 將設置inline與文本的自然流動（關於「baseline」）非常相似inline。 區別在於您可以設置width和height，這將使 受到尊重。

Source

加display:inline-block導致元素之間的差距，這有幾個解決方案來解決這些問題：

• 刪除空格
• 緣陰性
• 跳過關閉標籤
• 設置字體大小爲零

Read more

所以這裏是一個片段：

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