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就可以解决了