JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div class="redBlock">
    This is example. Специально, чтобы показать, что ничего хорошего с играми с line-height не получится, между строками не останется отступа, текст нечитабельный. Не подходит даже в случае, когда есть одна строка текста.
</div>
<div class="blueBlock">
    <div>This is example. Поэтому можно попробовать поиграться с позиционированием, но для этого нужен дополнительный контейнер.</div>
</div>

CSS

body {
    background: silver;
}
.redBlock {
    margin: 50px;
    width: 300px;
    background: red;
    font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
    font-size: 10pt;
    color: white;
    line-height: 0.8;
}
.blueBlock {
    margin: 50px;
    width: 300px;
    background: blue;
    font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
    font-size: 10pt;
    color: white;
}
.blueBlock > div {
    position: relative;
    top: -.25em;
    left: -.05em;
}