Search code examples
cssreact-reduxrowantd

Why is there an extra spacing below my header element?

I'm using ant.design and React/Redux and want to adjust spacing between elements, but extra space gets added around my paragraph and heading tags.

I've looked around for inline and css styling, but I haven't been able to find what code is causing the extra spacing. 

<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>

with orange padding full div tag

I expected a div that has a height of 22px because the font size is 22px, but there is extra spacing around the h2 header and even more spacing below the h2 header.

Solution

  • The orange bar on the h1 is the bottom margin. If you want that space to go away, do h1 { margin-bottom: 0; }.

    The blue bar containing the text represents line height. To adjust that, do like div { line-height: 8px; }.

    Edit: In JSX those properties would be marginBottom and lineHeight, respectively.