Как я могу изменить <h1> на <h6>, чтобы иметь те же отступы, что и <p>, используя em вместо px при сохранении их одинаковыми?

Question

Нет кода, просто простая концепция, с которой мне нужна помощь:

Я хочу заполнение выше / ниже всех текстовых элементов (h1-h6, p, blockquote, code и т. Д.) быть таким же. Я хочу, чтобы это было 1em = 16px. Но если я установлю для них все отступы в 1em, то у элементов с большим текстом, таких как h1, будет больше отступов, потому что он равен 1em относительно размера шрифта h1. Как я могу сделать так, чтобы все они имели 1em относительно размера шрифта p?

Я не хочу использовать пиксели в качестве заданной ширины, потому что тогда удвоение текста страницы до размера 1em = 32px не удвоитсязаполнение делает его вдвое меньше, чем нужно. Как мне это сделать?

Answer 1

Вы устанавливаете размер шрифта

, относительно размера шрифта окружающего текста, и вы вычисляете заполнение в ems так же, как заполнение . * 1005. * Например: body { font-size: 24px; } p { padding-top: 1em; } h1 { font-size: 1.25em; padding-top: 0.8em; /* = 1 / 1.25 */ } Визуальный разрыв по-прежнему будет другим, потому что вы ничего не сказали о полях и высоте строк. Проверьте, как это работает (обратите внимание, как 0,5 = 0,625/ 1.25): <style> p, h1 { border: 1px solid red; } p { padding-top: 0.625em; padding-bottom: 0.625em; } h1 { font-size: 1.25em; padding-top: 0.5em; padding-bottom: 0.5em; } span { background: #DDEEFF; } </style> <p>This is some text which is intended as a filler to demonstrate a point. This is some text which is intended as a filler to demonstrate a point. This is some text which is intended as a filler to demonstrate a point. This is some text which is intended as a filler to demonstrate a point. This is some text which is intended as a filler to demonstrate a point.</p> <p><span>This is some more text which is intended as a filler to demonstrate a point. This is some more text which is intended as a filler to demonstrate a point. This is some more text which is intended as a filler to demonstrate a point. This is some more text which is intended as a filler to demonstrate a point. This is some more text which is intended as a filler to demonstrate a point.</span></p> <h1><span>Heading with the same padding as the paragraphs</span></h1> <p>This is some other text which is intended as a filler to demonstrate a point. This is some other text which is intended as a filler to demonstrate a point. This is some other text which is intended as a filler to demonstrate a point. This is some other text which is intended as a filler to demonstrate a point. This is some other text which is intended as a filler to demonstrate a point.</p>

Answer 2

Вы можете использовать другое устройство, например rem, ch, ex