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

The easiest way to cause the

newline character is to add layout to font-size:0, and there are really a lot of searches for this problem online, http://www.zhangxinxu.com/wor... Here There is one by Zhang Xinxu, you can check it out

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

Thank you for the invitation.

There will be gaps between

inline-block elements because there will be line breaks between each element (referring to the layoutp elements of each <p> class). For specific solutions, see removing the gaps between inline-block elements. I won’t go into details about the N methods of spacing.

Answer 4

inline-block parses newlines into spaces - this was a problem seven or eight years ago. . You can find the solution on Baidu yourself
Here’s an example

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

Answer 5

White space characters.

<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

Float

.layoutp {
  float: left;
}

Answer 7

Inline-block will have a spacing of 3-4px. It's own attributes. So if you want to have no gaps, you need to use the float attribute

Answer 8

This is inline-block parsing newlines into spaces. . Generally we can solve the problem by setting the parent element font-size:0