我希望html中所有空的元素都有一个换行符，并使用css来实现这种效果。
详细信息:
下面的两个p标记应具有相同的外观（跨浏览器和缩放级别）
P标记的所有其他海关样式都相同
null
p:empty {
/** How can I code here (or some other way css codes can achieve this) **/
}<p><br></p>
<p></p>null
背景:我想在prosemirror编辑器中显示编辑内容的预览，而编辑器在将内容序列化到JSON时不保留，并且在从JSON呈现预览时使其看起来不同。 参见:discuss.prosemirror
有几种方法可以做到这一点，下面是如何在自己的代码后面使用相同的逻辑，只需在内容后面添加一个空格unicode即可:
null
p:empty:after {
content: '\00a0 ';
}
p {
outline:1px solid red;
}<p><br></p>
<p></p>
您可以为提供显式的height和line-height，如下所示:
p {
height: 1em;
line-height: 1em;
}
工作示例:
null
table, tr, th, td {
border: 1px solid rgb(191, 191, 191);
}
p {
height: 1em;
line-height: 1em;
text-align: center;
border: 1px solid red;
}<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
</thead>
<tr>
<td>
<p></p>
<p>Two</p>
<p></p>
<p>Four</p>
</td>
<td>
<p><br></p>
<p>Two</p>
<p><br></p>
<p>Four</p>
</td>
</tr>
</table>
空内联块元素也可以执行此任务:
null
p:empty:after {
content: '';
display:inline-block;
}
p {
outline:1px solid red;
}<p><br></p>
<p></p>
<div style="font-size:30px">
<p><br></p>
<p></p>
</div>