css - div 與 inline block 空隙？

問題描述

想問問假設

<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之間有空隙，於是導致他沒辦法一行兩個他會跑到下面去......

問題解答

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

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

或者去掉p之間的空格試試回答3：

謝邀.

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

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

.layout{font-size:0;}.layoutp{font-size:16px;}回答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>回答6：

浮動

.layoutp { float: left;}回答7：

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

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