CSS em — одиниця від розміру шрифту самого елемента

HTML

<h3>Добре: розміри коробки в em — компонент масштабується цілком</h3>
<p>
    <span class="badge s">маленький</span>
    <span class="badge m">середній</span>
    <span class="badge l">великий</span>
</p>

<h3>Пастка 1: em у font-size множиться з кожним рівнем</h3>
<div class="nest">рівень 1
    <div>рівень 2
        <div>рівень 3
            <div>рівень 4</div>
        </div>
    </div>
</div>

<h3>Пастка 2: line-height у em успадковується вже в пікселях</h3>
<div class="trap">line-height: 1.5em → <b>великий рядок налазить</b> на сусідній</div>
<div class="ok">line-height: 1.5 → <b>великий рядок</b> має власну висоту</div>

CSS

body {
    font: 16px/1.5 system-ui, sans-serif;
}

h3 {
    margin: 20px 0 6px;
    font-size: 15px;
}

/* Жодного пікселя всередині — тільки em: один клас, три розміри */
.badge {
    display: inline-block;
    padding: 0.4em 0.9em;
    border: 0.125em solid #1b4f9c;
    border-radius: 0.5em;
    background: #cfe0f7;
    color: #1b4f9c;
    font-weight: 600;
}

.s {
    font-size: 12px;
}

.m {
    font-size: 18px;
}

.l {
    font-size: 28px;
}

/* Кожен рівень множить розмір батька: 22.4 → 31.36 → 43.9 → 61.5px */
.nest,
.nest div {
    font-size: 1.4em;
}

.trap,
.ok {
    width: 250px;
    margin-bottom: 10px;
    padding: 8px;
    border: 2px solid #b9c6d8;
    font-size: 12px;
}

.trap {
    line-height: 1.5em;
}

.ok {
    line-height: 1.5;
}

.trap b,
.ok b {
    font-size: 28px;
    font-weight: 400;
}