<div class="toggles">
  <button type="button" id="logical" aria-pressed="false" onclick="toggle(this.id);flipLogical();">
    Logical
  </button>
</div>

<div id="Wrapper" class="typical">
  <div id="MinMax">
    <div>
      <div id="Position">
        <div><span></span><span class="t">top</span><span class="l">inset-block-start</span></div>
        <div><span></span><span class="t">left</span><span class="l">inset-inline-start</span></div>
        <div id="Margin">
          <div><span class="t">margin-top</span><span class="l">margin-block-start</span></div>
          <div><span class="t">margin-left</span><span class="l">margin-inline-start</span></div>
          <div id="Border">
            <div><span class="t">border-top-left-radius</span><span class="l">border-start-start-radius</span></div>
            <div><span class="t">border-top</span><span class="l">border-block-start</span></div>
            <div><span class="t">border-top-right-radius</span><span class="l">border-start-end-radius</span></div>
            <div><span class="t">border-left</span><span class="l">border-inline-start</span></div>
            <div id="Padding">
              <div><span class="t">padding-top</span><span class="l">padding-block-start</span></div>
              <div><span class="t">padding-left</span><span class="l">padding-inline-start</span></div>
              <div>
                <div>text-align: <span class="t">left</span><span class="l">start</span></div>
                <div>text-align: <span class="t">right</span><span class="l">end</span></div>
              </div>
              <div><span class="t">padding-right</span><span class="l">padding-inline-end</span></div>
              <div><span class="t">padding-bottom</span><span class="l">padding-block-end</span></div>
            </div>
            <div><span class="t">border-right</span><span class="l">border-inline-end</span></div>
            <div><span class="t">border-bottom-left-radius</span><span class="l">border-end-start-radius</span></div>
            <div><span class="t">border-bottom</span><span class="l">border-block-end</span></div>
            <div><span class="t">border-bottom-right-radius</span><span class="l">border-end-end-radius</span></div>
          </div>
          <div><span class="t">margin-right</span><span class="l">margin-inline-end</span></div>
          <div><span class="t">margin-bottom</span><span class="l">margin-block-end</span></div>
        </div>
        <div><span class="t">right</span><span class="l">inset-inline-end</span><span></span></div>
        <div><span class="t">bottom</span><span class="l">inset-block-end</span><span></span></div>
      </div>
    </div>
    
    <div>
      <div class="height min">
        <div></div>
        <div>
          <span class="t">min-height</span><span class="l">min-block-size</span>
        </div>
        <div></div>
      </div>
      <div class="height max">
        <div></div>
        <div>
          <span class="t">max-height</span><span class="l">max-block-size</span>
        </div>
        <div></div>
      </div>
    </div>
 
    <div>
      <div class="width min">
        <div></div>
        <div>
          <span class="t">min-width</span><span class="l">min-inline-size</span>
        </div>
        <div></div>
      </div>
      <div class="width max">
        <div></div>
        <div>
          <span class="t">max-width</span><span class="l">max-inline-size</span>
        </div>
        <div></div>
      </div>
    </div>
</div>

<p>
  Used in the blog post <cite><a href="https://adrianroselli.com/2019/11/css-logical-properties.html" target="_blank" rel="noreferrer noopener">CSS Logical Properties</a></cite>.
</p>
body {
  background-color: #fff;
  color: #333;
  margin: 5em 2em 1em 2em;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1;
/*     letter-spacing: 0.12em; */
/*     word-spacing: 0.16em; */
/*     font-size: 200%; */
}

/* Dark mode */
@media screen and (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background-color: #101010;
  }
  a:link, a:visited {
    color: #0ff;
  }
}


#Padding > *,
#Border > *:not(:nth-child(5)),
#Margin > *:not(:nth-child(3)),
#Position > *:not(:nth-child(3)) {
  padding: .5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

#Padding, #Margin, #Position {
  display: grid;
  grid-template-columns: 1.75em auto 1.75em;
  grid-template-rows: auto auto auto;
  text-align: center;
  background-color: #E3DCFF;
  color: #000000;
}

#Position {
  background-color: transparent;
  color: inherit;
}

#Position > div:nth-child(1),
#Position > div:nth-child(5) {
  padding: .2em;
}

#Position > div:nth-child(2),
#Position > div:nth-child(4) {
  flex-wrap: wrap;
  align-content: center;
  padding: .2em;
}

#Position > div:nth-child(2) {
  margin-left: -.6em;
}

#Position > div:nth-child(4) {
  margin-right: -.6em;
}

#Position > div:nth-child(1) > span,
#Position > div:nth-child(5) > span {
  padding: .5em;
  width: 50%;
}

#Position > div:nth-child(2) > span,
#Position > div:nth-child(4) > span {
  flex: 1 1 100%;
  padding: .5em;
/*   outline: 2px dotted #f00; */
  min-height: 7em;
}

#Position > div:nth-child(1) > span {
  text-align: left;
}

#Position > div:nth-child(5) > span,
#Position > div:nth-child(2) > span,
#Position > div:nth-child(4) > span {
  text-align: right;
}

#Position > div:nth-child(1) > span.t,
#Position > div:nth-child(1) > span.l {
  border-left-width: .1em;
  border-left-style: solid;
}

#Position > div:nth-child(5) > span.t,
#Position > div:nth-child(5) > span.l {
  border-right-width: .1em;
  border-right-style: solid;
}

#Position > div:nth-child(2) > span.t,
#Position > div:nth-child(2) > span.l,
#Position > div:nth-child(4) > span.t,
#Position > div:nth-child(4) > span.l {
  border-bottom-width: .1em;
  border-bottom-style: solid;
}

#Position > div > span {
  border-color: #737373;
}

#Margin {
  background-color: #FDFFDF;
  border: .1em dashed #D8E60A;
}

#Padding > *:nth-child(1),
#Padding > *:nth-child(5),
#Margin > *:nth-child(1),
#Margin > *:nth-child(5),
#Position > *:nth-child(1),
#Position > *:nth-child(5) {
  grid-column: 2;
}

#Padding > *:nth-child(1),
#Margin > *:nth-child(1),
#Position > *:nth-child(1) {
  grid-row: 1;
}

#Padding > *:nth-child(5),
#Margin > *:nth-child(5),
#Position > *:nth-child(5) {
  grid-row: 3;
}

#Padding > *:nth-child(2),
#Padding > *:nth-child(4),
#Margin > *:nth-child(2),
#Margin > *:nth-child(4),
#Position > *:nth-child(2),
#Position > *:nth-child(4) {
  grid-row: 1 / span 3;
}

#Padding > *:nth-child(3) {
  background-color: #CFF0FB;
  border: .1em dashed #54A9FF;
}

#Padding > *:nth-child(3) {
  display: flex;
  justify-content: space-between;
}

#Padding > *:nth-child(3) > div {
  text-align: left;
}

#Padding > *:nth-child(3) > div:nth-child(2) {
  text-align: right;
}

#Border {
  display: grid;
  grid-template-columns: 1.75em auto auto auto 1.75em;
  grid-template-rows: auto auto auto;
  text-align: center;
  background-color: #737373;
  color: #fff;
}

#Wrapper.typical .l {
  display: none;
}

#Wrapper.logical .t {
  display: none;
}

#Border > *:nth-child(1),
#Border > *:nth-child(7) {
  grid-column: 1 / span 2;
  justify-content: flex-start;
  text-align: left;
}

#Border > *:nth-child(3),
#Border > *:nth-child(9) {
  grid-column: 4 / span 2;
  justify-content: flex-end;
  text-align: right;
}

#Border > *:nth-child(5) {
  grid-column: 2 / span 3;
}

#Padding > *:nth-child(2) span,
#Padding > *:nth-child(4) span,
#Border > *:nth-child(4) span,
#Border > *:nth-child(6) span,
#Margin > *:nth-child(2) span,
#Margin > *:nth-child(4) span,
#Position > *:nth-child(2) span,
#Position > *:nth-child(4) span {
  writing-mode: vertical-rl;
  text-orientation: sideways;
/*   display: block; */
  margin: auto;
  white-space: nowrap;
}

#Padding > *:nth-child(2) span,
#Border > *:nth-child(4) span,
#Margin > *:nth-child(2) span,
#Position > *:nth-child(2) span {
  transform: rotate(180deg);
}

#MinMax {
  padding: 2px;
  display: grid;
  grid-template-columns: 20fr 1fr;
  grid-template-rows: auto auto;
}

#MinMax > div:nth-child(2) {
  grid-row: 1;
  grid-column: 2;
  display: flex;
}

.width, .height {
  display: flex;
  margin: 1em 1.75em;
}

.height {
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
  margin: 2.25em 0 2.25em 1.5em;
}

.height div:nth-child(2) {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  display: block;
  margin: auto;
  white-space: nowrap;
}

.width div, .height div {
  flex: 1 1 auto;
  min-width: 1em; /* weird Chrome/FF bug */
/*   outline: 1px dotted #f00; */
}

.width div:nth-child(2), .height div:nth-child(2) {
  flex: 0 1 auto;
  text-align: center;
  white-space: nowrap;
  padding: 0 1em;
}

.height div:nth-child(2) {
  padding: 1em 0;
}

.height div:not(:nth-child(2)) {
  background: linear-gradient(90deg, transparent 0%, transparent 50%, #333 50%, transparent calc(50% + .1em), transparent 100%);
}

.width div:not(:nth-child(2)) {
  background: linear-gradient(0deg, transparent 0%, transparent 50%, #333 50%, transparent calc(50% + .1em), transparent 100%);
}

.height.max div:nth-child(1),
.height.min div:nth-child(3) {
  border-top: .1em solid #333;
}

.height.min div:nth-child(1),
.height.max div:nth-child(3) {
  border-bottom: .1em solid #333;
}

.width.max div:nth-child(1),
.width.min div:nth-child(3) {
  border-left: .1em solid #333;
}

.width.min div:nth-child(1),
.width.max div:nth-child(3) {
  border-right: .1em solid #333;
}

/* Dark mode */
@media screen and (prefers-color-scheme: dark) {
  #Position > div > span {
    border-color: #B1B1B3;
  }
  #Padding, #Margin {
    color: #f9f9f9;
  }
  #Padding {
    background-color: #6657A6;
  }
  #Margin {
    background-color: #73764A;
    border-color: #BDCA00;
  }
  #Border {
    background-color: #38383D;
  }
  #Padding > *:nth-child(3) {
    background-color: #407AA4;
    border-color: #00B8FF;
  }
  .width.max div:nth-child(1),
  .width.max div:nth-child(3),
  .width.min div:nth-child(1),
  .width.min div:nth-child(3),
  .height.max div:nth-child(1),
  .height.max div:nth-child(3),
  .height.min div:nth-child(1),
  .height.min div:nth-child(3) {
    border-color: #B1B1B3;
  }
  .width div:not(:nth-child(2)) {
    background: linear-gradient(0deg, transparent 0%, transparent 50%, #B1B1B3 50%, transparent calc(50% + .1em), transparent 100%);
  }
  .height div:not(:nth-child(2)) {
  background: linear-gradient(90deg, transparent 0%, transparent 50%, #B1B1B3 50%, transparent calc(50% + .1em), transparent 100%);
  }
}


/* Toggle */
/* https://adrianroselli.com/2019/08/under-engineered-toggles-too.html */

.toggles {
  margin: 0;
  padding: .5em 2em 1em 2em;
  border-bottom: .1em solid #ccc;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

.toggles [aria-pressed] {
  display: block;
  box-sizing: border-box;
  border: none;
  color: inherit;
  background: none;
  font: inherit;
  line-height: inherit;
  text-align: left;
  padding: .4em 0 .4em 4em;
  position: relative;
}

.toggles [aria-pressed][disabled],
.toggles [aria-pressed][disabled]:hover {
  color: #999;
}

.toggles [aria-pressed]:focus,
.toggles [aria-pressed]:hover {
  color: #00f;
  outline: none;
}

.toggles [aria-pressed]:focus::before,
.toggles [aria-pressed]:hover::before {
  box-shadow: 0 0 0.5em #333;
}

.toggles [aria-pressed]:focus::after,
.toggles [aria-pressed]:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='rgba(0,0,0,.25)'/%3E%3C/svg%3E");
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center center;
}

.toggles [aria-pressed]::before,
.toggles [aria-pressed]::after {
  content: "";
  position: absolute;
  height: 1.5em;
  transition: all 0.25s ease;
}

.toggles [aria-pressed]::before {
  left: 0;
  top: 0.2em;
  width: 3em;
  border: 0.2em solid #767676;
  background: #767676;
  border-radius: 1.1em;
}

.toggles [aria-pressed]::after {
  left: 0;
  top: 0.25em;
  background-color: #fff;
  background-position: center center;
  border-radius: 50%;
  width: 1.5em;
  border: 0.15em solid #767676;
}

.toggles [aria-pressed=true]::after {
  left: 1.6em;
  border-color: #36a829;
  color: #36a829;
}

.toggles [aria-pressed=true]::before {
  background-color: #36a829;
  border-color: #36a829;
}

.toggles [aria-pressed][disabled]::before {
  background-color: transparent;
  border-color: #ddd;
}

.toggles [aria-pressed][disabled]::after {
  border-color: #ddd;
}

.toggles [aria-pressed][disabled]:hover {
  color: #999; /* case for CSS custom property if not supporting IE/Edge */
}

.toggles [aria-pressed][disabled]:hover::before {
  box-shadow: none;
}

.toggles [aria-pressed][disabled]:hover::after {
  background-image: none;
}

/* Put toggles on the right like the iOS the kids like */

.toggles.flip [aria-pressed]::before,
.toggles.flip [aria-pressed]::after {
  left: auto;
  right: 0;
}

.toggles.flip [aria-pressed]::after {
  left: auto;
  right: 1.6em;
}

.toggles.flip [aria-pressed=true]::after {
  right: 0;
}

.toggles.flip [aria-pressed] {
  padding-left: 0;
  padding-right: 4em;
}

/* Windows High Contrast Mode Support */
@media screen and (-ms-high-contrast: active) {
  .toggles [aria-pressed]:focus::before,
  .toggles [aria-pressed]:hover::before {
    outline: 1px dotted windowText;
    outline-offset: 0.25em;
  }
  .toggles [aria-pressed]::after {
    background-color: windowText;
  }
  .toggles [aria-pressed][disabled]::after {
    background-color: transparent;
  }
}

/* Reduced motion */
@media screen and (prefers-reduced-motion: reduce) {
  .toggles [aria-pressed]::before,
  .toggles [aria-pressed]::after {
    transition: none;
  }
}

/* Dark mode */
@media screen and (prefers-color-scheme: dark) {
  .toggles {
    color: #fff;
    background-color: #101010;
    border-color: #444;
  }
  fieldset.toggles {
    border: 0.1em solid rgba(255, 255, 255, 0.15);
  }
  .toggles [aria-pressed]:focus,
  .toggles [aria-pressed]:hover {
    color: #99f;
  }
  .toggles [aria-pressed]::before {
    border-color: #808080;
    background: #808080;
  }
  .toggles [aria-pressed]::after {
    background-color: #101010;
  }
  .toggles [aria-pressed]:focus::after,
  .toggles [aria-pressed]:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='rgba(255,255,255,.25)'/%3E%3C/svg%3E");
  }
  .toggles [aria-pressed][disabled]::before,
  .toggles [aria-pressed][disabled]::after {
    border-color: #555;
  }
}

/* RTL */
/* https://twitter.com/dror3go/status/1102946375396982784 */
*[dir="rtl"] .toggles [aria-pressed] {
  padding-left: 0;
  padding-right: 4em;
}

*[dir="rtl"] .toggles [aria-pressed]::before,
*[dir="rtl"] .toggles [aria-pressed]::after {
  left: auto;
  right: 0;
}

*[dir="rtl"] .toggles [aria-pressed]::after {
  right: 0;
}

*[dir="rtl"] .toggles [aria-pressed=true]::after {
  right: 1.6em;
}

/* Put toggles on the right like the iOS the kids like */

*[dir="rtl"] .toggles.flip [aria-pressed]::before,
*[dir="rtl"] .toggles.flip [aria-pressed]::after {
  left: 0;
  right: auto;
}

*[dir="rtl"] .toggles.flip [aria-pressed]::after {
  right: auto;
  left: 1.6em;
}

*[dir="rtl"] .toggles.flip [aria-pressed=true]::after {
  left: 0;
}

*[dir="rtl"] .toggles.flip [aria-pressed] {
  padding-right: 0;
  padding-left: 4em;
}
function toggle(btnID) {
  var theButton = document.getElementById(btnID);
  if (theButton.getAttribute("aria-pressed") == "false") {
    theButton.setAttribute("aria-pressed", "true");
  } else {
    theButton.setAttribute("aria-pressed", "false");
  }
}

function flipLogical() {
  var theWrapper = document.getElementById("Wrapper");
  if (theWrapper.getAttribute("class") == "typical") {
    theWrapper.setAttribute("class", "logical");
  } else {
    theWrapper.setAttribute("class", "typical");
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.