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

  .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之间的空格试试

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