不要使用CSS显示空的内联块元素

Question

我有这个HTML布局：

<p>foo</p><p>bar</p>
<p>foo2</p><p>bar2</p>
<p></p><p></p>
<p>foo4</p><p>bar4</p>
<p></p><p></p>

的样式为：

p{display:inline-block; width:50%;margin:0;}
p:nth-child(even){text-align:left;background:red;}
p:nth-child(odd){text-align:right;background:blue;}

问题在于空元素占用空间。是否可以（仅使用CSS ）来防止空元素占用垂直空间？

Here is a fiddle of the problem

Answer 1

使用:empty pseudo class隐藏空元素：

Example Here

p:empty {
  display: none;
}

＆＃13;

＆＃13;

p {
  display: inline-block;
  width: 50%;
  margin: 0;
}

p:nth-child(even) {
  text-align: left;
  background: red;
}

p:nth-child(odd) {
  text-align: right;
  background: blue;
}
p:empty {
  display: none;
}

＆＃13;

<p>foo</p><p>bar</p>
<p>foo2</p><p>bar2</p>
<p></p><p></p>
<p>foo4</p><p>bar4</p>
<p></p><p></p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用:empty伪类来选择和隐藏这些元素。

但是在使用这个伪类选择器时你必须小心，因为即使元素里面有一个空格

，这个也不会起作用。

p {
  display: inline-block;
  width: 50%;
  margin: 0;
}
p:nth-child(even) {
  text-align: left;
  background: red;
}
p:nth-child(odd) {
  text-align: right;
  background: blue;
}
p:empty{
  display: none;
}

<p>foo</p>
<p>bar</p>
<p>foo2</p>
<p>bar2</p>
<p></p>
<p></p>
<p>foo4</p>
<p>bar4</p>
<p></p>
<p></p>

下面的代码片段只是为了说明它不会选择不完全为空的元素（没有空格）。

p {
  display: inline-block;
  width: 50%;
  margin: 0;
}
p:nth-child(even) {
  text-align: left;
  background: red;
}
p:nth-child(odd) {
  text-align: right;
  background: blue;
}
p:empty{
  display: none;
}

<p>foo</p>
<p>bar</p>
<p>foo2</p>
<p>bar2</p>
<p> </p>
<p> </p>
<p>foo4</p>
<p>bar4</p>
<p> </p>
<p> </p>