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

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

Thank you for the invitation.

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.

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;}

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>

Float

.layoutp {
  float: left;
}

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

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