Spacing with Text

index.html

<div class="container">
  <h1>Spacing with Text</h1>

  <div class="normal-text">
    <h2>Normal text</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta veritatis in beatae doloremque ipsa qui odit quas dolorem. Ad, quaerat?</p>
  </div>

  <!--  LINE HEIGHT  -->
  <div class="line__height--with">
    <h2>With line-height</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta veritatis in beatae doloremque ipsa qui odit quas dolorem. Ad, quaerat?</p>
  </div>

  <!--  LETTER SPACING  -->
  <div class="letter__spacing--with">
    <h2>With letter-spacing</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta veritatis in beatae doloremque ipsa qui odit quas dolorem. Ad, quaerat?</p>
  </div>

  <!--  WORD SPACING  -->
  <div class="word__spacing--with">
    <h2>With word-spacing</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta veritatis in beatae doloremque ipsa qui odit quas dolorem. Ad, quaerat?</p>
  </div>

  <!--  TEXT INDENT  -->
  <div class="text__indent--with">
    <h2>With text-indent</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta veritatis in beatae doloremque ipsa qui odit quas dolorem. Ad, quaerat?</p>
  </div>

  <!--  WHITE SPACE  -->
  <div class="white__space--with">
    <h2>With white-space</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta veritatis in beatae doloremque ipsa qui odit quas dolorem. Ad, quaerat?</p>
  </div>
</div>

style.css

:root {
  --spacing: 1rem;
}

.line__height--with {
  line-height: calc(var(--spacing) * 2);
}

.letter__spacing--with {
  letter-spacing: calc(var(--spacing) * 0.2);
}

.word__spacing--with {
  word-spacing: calc(var(--spacing) * 2);
}

.text__indent--with {
  text-indent: calc(var(--spacing) * 6);
}

.white__space--with {
  white-space: pre-wrap;
}

/* ===================== */
/*==== OTHER STYLES ==== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: sans-serif;
  color: #262626;
}

h1 {
  font-weight: 900;
  grid-column: 1 /-1;
  margin-bottom: var(--spacing);
}

h1,
h2 {
  text-align: center;
}

p {
  font-weight: 300;
}

.container {
  min-height: 100%;
  border: 16px ridge #ff6550;
  background: #ffe7e7;
  padding: var(--spacing);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  place-items: center;
  gap: var(--spacing);
}

.container > div {
  max-width: 700px;

  background: #ea5b4853;
  border-radius: 5px;
  padding: calc(var(--spacing) * 0.8);
}