html - 如何消除与“writing-mode: vertical-rl;”相关的空白？

Question

我在 HTML 中创建了一个无序列表，并使用了一些行来显示关系，但是当我旋转文本时

writing-mode: vertical-rl;

<p>我和内心之间有这样的差距<a>：

元素<a>包含one<br>two，其父元素<p>只有一个子元素。

这是我在 codepen 上的代码，我怎样才能消除红色箭头所指的间隙？

标签： htmlcss

Answer 1

这个差距是由line-heightinp标签引起的：

.vertical p{
  line-height: 0;
}

.vertical a{
  line-height: 100%;
}