Почему под моим заголовком есть дополнительный интервал? - PullRequest
0 голосов
/ 01 января 2019

Я использую 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>

with orange padding full div tag

Я ожидал, что div имеет высоту 22px, поскольку размер шрифта равен 22px,но есть дополнительный интервал вокруг заголовка h2 и еще больший интервал ниже заголовка h2.

Ответы [ 2 ]

0 голосов
/ 01 января 2019

Оранжевая полоса на h1 - это нижнее поле.Если вы хотите, чтобы это пространство исчезло, выполните h1 { margin-bottom: 0; }.

Синяя полоса с текстом представляет высоту строки.Чтобы настроить это, выполните следующие действия: div { line-height: 8px; }.

Редактировать: в JSX эти свойства будут marginBottom и lineHeight соответственно.

0 голосов
/ 01 января 2019

H-теги обычно имеют поля по умолчанию, не видя остальную часть вашего CSS, я не могу знать наверняка, но готов поспорить, что это ваша проблема.

Вы можете установить margin-bottom: 0, если вы этого не хотитевот так.

...