<h1>Logical porperties in top to bottom languages</h1>

<p>Using the <code>border</code> property as an example. We look at what logical properties can do for us.</p>

<div class="container">
  <p class="border-block">border-block</p>
  <p class="border-block-start">border-block-start</p>
  <p class="border-block-end">border-block-end</p>
</div>

<div class="container">
  <p class="border-inline">border-inline</p>
  <p class="border-inline-start">border-inline-start</p>
  <p class="border-inline-end">border-inline-end</p>
</div>

body {
  height: 100vh;
  flex-wrap: wrap;
  font-family: Lato;
  margin-block-start: 4em;
  margin-inline: 4em;
}

.container {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 6em;
}

p {
  padding-inline: 24px;
  padding-block: 32px;
}

.border-block {
  border-block: 8px solid blue;
}

.border-block-start {
  border-block-start: 8px solid blue;
}

.border-block-end {
  border-block-end: 8px solid blue;
}

.border-inline {
  border-inline: 8px solid blue;
}

.border-inline-start {
  border-inline-start: 8px solid blue;
}

.border-inline-end {
  border-inline-end: 8px solid blue;
}