JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<p class="block-size"><span>span</span></p>
<p class="block"><span>span</span></p>
<p class="equal"><span>span</span></p>
<p class="minus"><span>span</span></p>
<p class="plus"><span>span</span></p>

CSS

/*Заготовка!*/
        p {
                background: #F90;
                padding-left: 10px;
                width: 80px;
                margin: 40px auto;
                position: relative;
                border: 2px dashed navy;
                background-clip: padding-box;
                font-family: 'Times New Roman', Times, serif;                
        }
        p:after
        {
                content: '';
                left: 0; right: 0;
                top: 50%;
                position: absolute;
                border-top: 4px double teal;
                transform: translateY(-50%);          
        }
        p span
         {
                background: #FC6;           
         }
/*Смотрим как соотносятся размер шрифта и аналогичный по значению размер блока*/
        .block-size span {
                font-size: 30px;
        }
        .block-size      {
                height: 30px;
                border-bottom-width: 4px;
        }
 /*при численном равенстве высоты блока и размера шрифта, последний, делает строчный элемент больше блока. при этом шрифт упирает в верхушку (похоже оставляя один пиксель, это в Мозиле, в Хроме этого нет, к этому пикселю мы ещё вернёмся). Так вот, строчный элемент упираясь своей верхушкой, об верхушку блока, свисает вниз, в нашем случае, похоже что на 4 пикселя. Стоит отметить, что я менял текст от xxx до Hpg то есть с теми символами, которые, по-идее, могут иметь большие выносные элементы. Размер строчного элемента от этого не менялся, отсюда делаю вывод, что размер строчного элемента для определённого размера шрифта постоянен для этого конкретного шрифта. как можно видеть наш шрифт, при этом, больше своего численного размера. Речь идёт, конечно, не о символах самих по себе, а о размере строчного элемента, где есть определённый запас и сверху и снизу.*/
/*Как размер шрифта вообще влияет на блок*/
        .block span {
                font-size: 30px;
        }
/*Он его расширяет. Обращаем внимание на...