css - div 與 inline block 空隙？

Question

想問問假設

<p class="layout">
<p class="layoutp">內容</p>
<p class="layoutp">內容</p>
<p class="layoutp">內容</p>
<p class="layoutp">內容</p>
<p class="layoutp">內容</p>
</p>

.layout
{
    width:100%;
    margin: 0 auto;
}
.layoutp
{
    cursor: pointer;
    position: relative;
    width: 50%;
    height: 100vh;
    display: inline-block;
    margin: 0;
}

這樣會讓p之間有空隙，於是導致他沒辦法一行兩個
他會跑到下面去......

Answer 1

換行符導致的，最簡單的就是給layout加font-size:0，而且這種問題網上真的是一搜一大把，http://www.zhangxinxu.com/wor... 這裡有張鑫旭的，可以看看

Answer 2

雷雷 雷雷

Answer 3

謝邀.

inline-block元素間會有空隙，是因為每個元素間都會有換行（指每個layoutp類的<p>元素之間），具體的解決方案詳見去除inline-block元素間間距的N種方法，我就不再贅述了。

Answer 4

inline-block把換行解析成空格了- -這是七八年前的問題了。 。你可以自己百度下解決方法的
下面給個例子

.layout{font-size:0;}
.layoutp{font-size:16px;}

Answer 5

空白字元。

<p class="layout">
<p class="layoutp">內容</p><p class="layoutp">內容</p><p class="layoutp">內容</p><p class="layoutp">內容</p><p class="layoutp">內容</p>
</p>

Answer 6

浮動

.layoutp {
  float: left;
}

Answer 7

inline-block會有3-4px的間距。本身的屬性帶的。所以要想沒有空隙，就需要用浮動float屬性

Answer 8

這是inline-block把換行解析成空格了。 。一般我們設定父級元素font-size:0就可以解決了