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

我有这个HTML布局:

foo
bar
foo2
bar2

foo4
bar4

其风格为:

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)防止空元素占用垂直空间？

这是一个问题的小提琴

使用:empty伪类隐藏空元素:

这里的例子

p:empty {
  display: none;
}

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

foo
bar
foo2
bar2

foo4
bar4