兩個inline元素或 inline-block元素中間有間隙

 

在寫代碼的時候遇到個問題，就是兩個行內塊元素之間有間隙，如下圖

 

 

 

 

1.如果兩個塊用float屬性，父級元素就得清楚浮動，可以解決空隙

2.使用css-flex屬性 給父級元素加上display:flex, 可以解決

如果不用其他方法，空隙還是存在，代碼如下

<style>

#id1{

   margin-left: 100px;

   display: inline;

   background-color: #ddd;

}

 #id2{

    display: inline;

    width: 200px;

    height: 300px;

   background-color: blueviolet;

}

</style>
<div id="id">
    <div id="id1">scope1</div>
    <div id="id2">scope2</div>
</div>   

后來發現將盒子里的兩個div 寫在一起就沒有空隙了，代碼如下：

<div id="id">
    <div id="id1">scope1</div><div id="id2">scope2</div>
</div>

應該是標簽之前的制表符 換行 或者空格顯示出來，占位了