如何在React JSX的<br>标签中设置行高？

首先要明确：<br> 标签本质是换行标记，默认是 inline 元素，不管是 HTML 还是 JSX，直接给它设置 line-height 都不会生效——你之前的 HTML 写法其实也没真正起到增加行高的作用，大概率是其他样式的巧合导致的错觉。

要实现换行后的间距，推荐这两种靠谱的方式：

1. 给文本容器设置行高（推荐） #

如果是控制多行文本之间的行间距，直接给包裹文本的容器（比如 <div>、<p>）设置 line-height 即可，JSX 写法如下：

<div style={{ lineHeight: '200%' }}>
  第一行内容<br />
  第二行内容
</div>

这样所有换行后的行间距都会统一遵循容器的行高设置，是最符合语义的做法。

2. 用块级元素实现自定义空行 #

如果需要单独的大间距空行，不要用 <br>，直接用带高度或 margin 的块级元素：

// 方式一：设置固定高度
<div style={{ height: '60px' }} />

// 方式二：用 margin 控制间距（更灵活）
<br style={{ display: 'block', marginBottom: '60px' }} />

这里把 <br> 改成 display: block 后，它就变成了块级元素，此时设置 margin 或 height 就能生效，实现自定义的空行高度。

内容的提问来源于stack exchange，提问作者Fatt Sky