<header>
  <h2>Logical Properties</h2>
  <pre>padding-block-start: 40px;</pre>
</header>

<section class="logical">
  <article>
    <div dir="ltr">
      <p>😀 😡 🥶 🤢 💩</p>
    </div>
    <pre><code>dir="ltr"</code></pre>
  </article>
  
  <article>
    <div dir="rtl">
      <p>😀 😡 🥶 🤢 💩</p>
    </div>
    <pre><code>dir="rtl"</code></pre>
  </article>
  
  <article>
    <div class="vertical-lr">
      <p>😀 😡 🥶 🤢 💩</p>
    </div>
    <pre><code>vertical-lr</code></pre>
  </article>
  
  <article>
    <div class="vertical-rl">
      <p>😀 😡 🥶 🤢 💩</p>
    </div>
    <pre><code>vertical-rl</code></pre>
  </article>
</section>

<header>
  <h2>Physical Properties</h2>
  <pre>padding-top: 40px;</pre>
</header>

<section class="physical">
  <article>
    <div dir="ltr">
      <p>😀 😡 🥶 🤢 💩</p>
    </div>
    <pre><code>dir="ltr"</code></pre>
  </article>
  
  <article>
    <div dir="rtl">
      <p>😀 😡 🥶 🤢 💩</p>
    </div>
    <pre><code>dir="rtl"</code></pre>
  </article>
  
  <article>
    <div class="vertical-lr">
      <p>😀 😡 🥶 🤢 💩</p>
    </div>
    <pre><code>vertical-lr</code></pre>
  </article>
  
  <article>
    <div class="vertical-rl">
      <p>😀 😡 🥶 🤢 💩</p>
    </div>
    <pre><code>vertical-rl</code></pre>
  </article>
</section>

.logical p {
  padding-block-start: 40px;
}

.physical p {
  padding-top: 40px;
}

/* extra styles */

article {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
}

div {
  height: 100px;
  background: #e7e7e7;
  padding: 20px;
}

h2 {
  font-size: 1.4em;
}

p {
  background: #d9d0e0;
  line-height: 1.5em;
}

pre {
  padding: 20px;
}

article pre {
  background: #30353b;
  color: white;
  font-size: 0.8em;
}

.vertical-lr {
  writing-mode: vertical-lr;
}

.vertical-rl {
  writing-mode: vertical-rl;
}

section {
  margin: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

header {
  margin: 20px;
}

body {
  font-family: -apple-system, system-ui, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif;
}

* {margin: 0; padding: 0;}

section + header {margin-top: 2em;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.