Атрибут compact тега <ol> — стислий нумерований список

HTML

<ol compact>
    <li>з compact — браузер ігнорує</li>
    <li>Чай</li>
</ol>
<ol>
    <li>без compact — так само</li>
    <li>Чай</li>
</ol>
<ol class="tight">
    <li>компактно через CSS</li>
    <li>Чай</li>
</ol>

CSS

.tight {
    margin: 0;
    line-height: 1.1;
}

HTML

<p class="head">Три списки з тим самим вмістом</p>

<div class="ryad">
  <div class="stovp">
    <p class="pidpys">ol compact</p>
    <ol compact>
      <li>Розігріти духовку</li>
      <li>Змішати сухі складники</li>
      <li>Додати молоко</li>
      <li>Випікати 40 хвилин</li>
    </ol>
  </div>

  <div class="stovp">
    <p class="pidpys">ol без compact</p>
    <ol>
      <li>Розігріти духовку</li>
      <li>Змішати сухі складники</li>
      <li>Додати молоко</li>
      <li>Випікати 40 хвилин</li>
    </ol>
  </div>

  <div class="stovp good">
    <p class="pidpys">ol зі стилями</p>
    <ol class="shchilnyj">
      <li>Розігріти духовку</li>
      <li>Змішати сухі складники</li>
      <li>Додати молоко</li>
      <li>Випікати 40 хвилин</li>
    </ol>
  </div>
</div>

<p class="note">Перші два списки збігаються до пікселя: атрибут не змінює нічого.
   Третій справді щільніший, і зробили це два рядки стилів —
   line-height: 1.15 і margin: 0.</p>

<p class="head">Те саме зі списком означень</p>
<div class="ryad">
  <div class="stovp">
    <p class="pidpys">dl compact</p>
    <dl compact>
      <dt>Духовка</dt><dd>Розігріти до 180 °C</dd>
      <dt>Форма</dt><dd>Змастити олією</dd>
    </dl>
  </div>
  <div class="stovp">
    <p class="pidpys">dl без compact</p>
    <dl>
      <dt>Духовка</dt><dd>Розігріти до 180 °C</dd>
      <dt>Форма</dt><dd>Змастити олією</dd>
    </dl>
  </div>
</div>
<p class="note">Для dl атрибут теж описували в старих підручниках — і він так само
   не робить нічого.</p>

CSS

.head {
    margin: 20px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ryad {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.stovp {
    padding: 6px 10px 6px 6px;
    border: 2px dashed #b9c6d8;
    border-radius: 6px;
}

.good {
    border-color: #3a9a4f;
    background: #f3fbf4;
}

.pidpys {
    margin: 0 0 2px;
    color: #1b4f9c;
    font: 13px/1.6 ui-monospace, monospace;
}

.shchilnyj {
    margin: 0;
    line-height: 1.15;
}

.note {
    max-width: 620px;
    margin: 10px 0 0;
    color: #5a6472;
    font-size: .9em;
}