为什么我的标题标签下方有多余的间距？

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>

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

Answer 1

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

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

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

Answer 2

H标签通常具有默认边距，但看不到我无法确定的其余CSS，但可以打赌这是您的问题。

如果您不想这样设置margin-bottom: 0。