Question

我正在开设一个网站，其中包括我希望以简洁的方式呈现的数学。我现在暂时离开LaTeX（不幸的是 - 不是我的选择）所以我为数学创建了一个简单的CSS类。这就是HTML的样子。

<p>
  Text goes here <br>
  <span class="math">Math goes here</span><br>
  More text<br>
  <span class="math">More math</span>
</p>

跨度曾经是div，但我发现你的段落中不能有div。但是，我希望跨度有一些垂直间距。由于我不能使用div和span不能有垂直间距，这是我最好的解决方案吗？在这种情况下是不是可以使用p标签？

提前致谢，感谢您的光临。

Answer 1

只需将范围设置为display:inline-block并添加垂直填充。

＆＃13;

span {
  background: pink;
  display: inline-block;
  padding: 1em 0;
}

＆＃13;

<p>
  Text goes here <br>
  <span class="math">Math goes here</span><br>
  More text<br>
  <span class="math">More math</span>
</p

＆＃13;

坦率地说，虽然最简单的方法是关闭段落而不是使用break标记，让自然边距为你工作。

＆＃13;

span {
  background: pink;
}

＆＃13;

<p>Text goes here</p>
<span class="math">Math goes here</span>
<p>More text</p>
<span class="math">More math</span>

＆＃13;

Answer 2

对span元素使用line-height和display:inline：

p span {
  background: pink;
  display: inline-block;
  line-height:50px;
}

<p>
  Text goes here <br>
  <span class="math">Math goes here</span><br>
  More text<br>
  <span class="math">More math</span>
</p