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之間有空隙,於是導致他沒辦法一行兩個他會跑到下面去......
問題解答
回答1:換行符導致的,最簡單的就是給layout添加font-size:0,而且這種問題網上真的是一搜一大把,http://www.zhangxinxu.com/wor... 這里有個張鑫旭的,可以看看
回答2:.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種方法,我就不再贅述了。
回答4: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屬性
回答8:這是inline-block把換行解析成空格了。。一般我們設置父級元素font-size:0就可以解決了
相關文章:
