css - 为什么我的标题元素下方有一个额外的间距？

Question

我正在使用 ant.design 和 React/Redux 并想调整元素之间的间距，但在我的段落和标题标签周围添加了额外的空间。

我四处寻找内联和 css 样式，但未能找到导致额外间距的代码。

<Row type="flex" justify="center">
    <Col>
        <h2
        style={{
        textAlign: "center",
            color: GREY_2,
        fontFamily: "Lucida Grande",
        fontWeight: "bold",
        fontSize: 22,
        padding: "0px 0px 0px 0px"
        }}
    >
        Online class through infinity2o
    </h2>
    </Col>
</Row>

我期望一个高度为 22px 的 div，因为字体大小是 22px，但是 h2 标题周围有额外的间距，h2 标题下方的间距甚至更多。

Answer 1

h1 上的橙色条是底部边距。如果您希望该空间消失，请执行 h1 { margin-bottom: 0; 。

包含文本的蓝色条表示行高。要调整它，请像 div { line-height: 8px; 。

编辑:在 JSX 中，这些属性分别是 marginBottom 和 lineHeight。