删除<p>之间的间距而不使用边距？

Question

我想删除此代码中<p>之间的空格：

CSS：

.ban {
  position: relative;
  display: inline-block;
  height: 500px;
  width: 500px;
  background-color: purple;
  text-align: center;
}
p {
  display: inline-block;
  width: 248px;
  background-color: beige;
  margin: 0px;
  vertical-align: top;
}

HTML： （我认为我不能使用div在p之外）

<div class="ban">
  <p>
     text
  </p>
  <p>
     text
  </p>
  <p id="text">
    text
  </p>
</div>

Answer 1

如果<p> s的内容不变，意味着您更改了它们，并且它们不是动态的，那么只需添加一个假div来覆盖空间，如下所示：

＆＃13;

＆＃13;

.ban {
  position: relative;
  display: inline-block;
  height: 500px;
  width: 500px;
  background-color: purple;
  text-align: center;
}
p {
  display: inline-block;
  width: 248px;
  background-color: beige;
  margin: 0px;
  vertical-align: top;
}
  div.fake {
    height: 72px;
    width: 10px;
    background: beige;
    position: absolute;
    z-index: 10;
    left: 253px;
  }

＆＃13;

<div class="fake"></div>

<div class="ban">
  <p>
     text<br>more<br>frikin<br>text<br>to<br>take<br>up<br>space
  </p>
  <p>
     text<br>some<br>other<br>text
  </p>
  <p id="text">
    text<br>hi<br>how<br>are<br>you
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

display: inline-block会带来不便。如果在元素之间放置一个返回字符，则显示小空格。为了避免这种情况，您需要将所有元素放在一起：

<div class="ban">
    <p>text</p><p>text</p><p id="text">text</p>
</div>

看看这个jsfiddle。

尝试分开段落，你会看到结果。