Числа у CSS — тип number, цілі й дробові значення без одиниць

HTML

<p class="one">line-height: 1 — рядки впритул. Абзац навмисно довгий, щоб зайняти кілька рядків і показати міжряддя наочно.</p>
<p class="two">line-height: 2 — подвійне міжряддя. І цей абзац навмисно довгий, щоб зайняти кілька рядків і показати різницю.</p>

CSS

p.one { line-height: 1; }
p.two { line-height: 2; }

HTML

<h4 class="cap">1. Число успадковується як число, відсоток — як готова довжина</h4>
<div class="cols">
    <div class="card num">
        <p class="lbl">батько: <code>font-size: 10px; line-height: 1.5</code></p>
        <p class="child">Дитина з <code>font-size: 30px</code>. Інтервал у неї
            45px — перерахований від ЇЇ розміру. Рядки лягли вільно, як і має
            бути.</p>
    </div>
    <div class="card pct">
        <p class="lbl">батько: <code>font-size: 10px; line-height: 150%</code></p>
        <p class="child">Дитина з <code>font-size: 30px</code>. Інтервал у неї
            15px — успадкований від батька готовою довжиною. Рядки налізли
            один на одного.</p>
    </div>
</div>

<h4 class="cap">2. Поза межами — підганяється мовчки</h4>
<div class="row">
    <div class="chip o-ok">opacity: 0.5</div>
    <div class="chip o-big">opacity: 5 → стало 1</div>
    <div class="slot">
        <div class="chip o-neg">opacity: -1 → стало 0</div>
        <span class="slot-lbl">тут лежить третій блок — його просто не видно,
            хоч місце в розкладці він займає</span>
    </div>
</div>
<p class="note">Жодне з цих оголошень не помилкове — усі три прийнято. Друге й
    третє просто підігнано до дозволених меж, тому помилка в розрахунку
    виглядає як «елемент чомусь видимий» або «елемент зник».</p>

<h4 class="cap">3. Дробове там, де чекають ціле — правило відкидається</h4>
<div class="row">
    <div class="stack">
        <div class="z z-ok">z-index: 2</div>
        <div class="z z-bad">z-index: 2.5</div>
    </div>
    <p class="note grow">Обидва квадрати мають <code>position: relative</code>.
        У верхнього <code>z-index: 2</code> — він лежить поверх. У нижнього
        написано <code>z-index: 2.5</code>, і це оголошення відкинуто цілком:
        воно не округлилося до 2 чи 3, його просто немає.</p>
</div>

CSS

.card {
    flex: 1 1 280px;
    max-width: 320px;
    padding: 4px 14px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
    font-size: 10px;
}

.num {
    line-height: 1.5;
}

.pct {
    line-height: 150%;
}

.child {
    font-size: 30px;
    margin: 8px 0 0;
}

.lbl {
    margin: 12px 0 0;
    font-size: 12px;
    color: #5a6472;
}

.cols,
.row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px;
}

.chip {
    padding: 14px 18px;
    border-radius: 6px;
    background: #2f6fd0;
    color: #fff;
    font-size: .9rem;
}

.o-ok {
    opacity: 0.5;
}

.o-big {
    opacity: 5;
}

.o-neg {
    opacity: -1;
}

/* рамка навколо невидимого блока: сам блок прозорий, а місце своє тримає */
.slot {
    padding: 4px;
    border: 2px dashed #b9c6d8;
    border-radius: 8px;
}

.slot-lbl {
    display: block;
    max-width: 200px;
    padding: 4px 2px 0;
    color: #5a6472;
    font-size: .78rem;
}

.stack {
    position: relative;
    width: 190px;
    height: 120px;
}

.z {
    position: absolute;
    width: 150px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: .85rem;
}

.z-ok {
    top: 0;
    left: 0;
    z-index: 2;
    background: #dbe6f5;
    border: 2px solid #2f6fd0;
}

.z-bad {
    top: 34px;
    left: 26px;
    z-index: 2.5;
    background: #fdeeee;
    border: 2px solid #d64545;
}

.note {
    max-width: 560px;
    color: #5a6472;
    font-size: .9em;
}

.note.grow {
    flex: 1 1 260px;
}

.cap {
    margin: 26px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

HTML

<h1>number CSS значення</h1>
<p>Значенням може виступати ціле число, що містить цифри від 0 до 9 і десятковий дріб, в якому ціла і десяткова частина розділяються крапкою. Якщо число починається з нуля, то його можна опустити (.5 замість 0.5).</p>

CSS

h1 { 
     line-height: 1.1; 
     color: rgb(214, 122, 127);
     text-align: center;
} 
p { 
     line-height: .9; 
     font-size: 20px;
     color: hsl(10, 100%, 50%);
     text-align: center;
}