vertical-align 철저 분석

서두에

본문의 첫 부분은 Vertical-Align: All You Need To Know 에서 번역한 것으로, 이전에 [CSS 상하좌우 중앙 정렬](/articles/css 상하좌우 중앙 정렬/) 의 참고 자료 부분에서 언급한 번역 대기 중인 기사입니다

나머지 부분은 원문의 테크닉 总结

一.역문

.top{display:inline-block;vertical-align:top}.bottom{display:inline-block;vertical-align:bottom}.middle{display:inline-block;vertical-align:middle}.baseline{display:inline-block;vertical-align:baseline}.text-top{display:inline-block;vertical-align:text-top}.text-bottom{display:inline-block;vertical-align:text-bottom}.sub{display:inline-block;vertical-align:sub}.super{display:inline-block;vertical-align:super}strong{font-weight:400}figure{line-height:1;overflow:visible}figure ul,figure ol{margin:0 !important;;padding:0 !important;}figure.center{text-align:center}figure.bg-grey{background:#f0f0f0;padding:1em}figure .center{text-align:center;display:inline-block;width:100%}figure+pre{margin-top:1em}figure *+*{margin-top:0}figure figcaption{width:100%;margin:0;margin-top:1em;font-style:italic;font-size:.8em}figure .bg-grey{background:#d3d3d3}figure .bg-green{background:#c1cd89}figure .bg-yellow{background:#fcdb9a}figure .bg-blue{background:#8ab3bf}figure .border-grey{border:1px solid #d3d3d3}figure .font{white-space:nowrap;line-height:1}figure .font.small{font-size:.6666em}figure .font.smaller{font-size:.3333em}figure .font.large{font-size:1.5em}figure .font.larger{font-size:3em}figure .font.tall-line-height{line-height:2}figure .font.short-line-height{line-height:.5}figure .font.color-grey{color:#d3d3d3}figure .box{min-width:1em;min-height:1em}figure .box.shorter{min-height:.25em}figure .box.shorter.quad{min-width:.25em}figure .box.short{min-height:.5em}figure .box.short.quad{min-width:.5em}figure .box.tall{height:2em}figure .box.tall.quad{width:2em}figure .box.taller{height:4em}figure .box.taller.quad{width:4em}figure .box.quad.max-third-width{max-width:30%}figure .inline-overlay{display:inline-block;width:100%;margin-right:-100%;position:relative;z-index:10}figure .line{display:inline-block;width:100%;margin-right:-100%;position:relative;z-index:10;border-top:1px solid #000}figure .line.dashed{border-style:dashed}figure .line.dotted{border-style:dotted}figure .line.grey{border-color:#d3d3d3}figure .line.red{border-color:red}figure .line.blue{border-color:#00f}figure .line.green{border-color:#32cd32}figure .line.orange{border-color:#daa520}figure .show-box-model{background:#c1cd89;border-color:#fcdb9a}figure .show-box-model>.show-box-model-content{background:#8ab3bf;display:block;min-width:100%;min-height:100%} .columns.no-break>* { margin-right: 2.5%; width: 47.5% !important; display: inline-block; margin-top: 0; } .columns.no-break.thirds>* { margin-right: 2.5%; width: 30% !important; display: inline-block; margin-left: 0; }

나란히 표시되는 요소를 수직으로 정렬해야 하는 경우가 자주 있습니다

CSS 는 몇 가지 선택지를 제공합니다. 때로는 float 로 해결하고, 때로는 position: absolute 를 사용하며, 때로는 수동으로 margin 이나 padding 을 추가하는 더러운 방법까지 사용합니다. 저는 이러한 방법들을 그다지 좋아하지 않습니다. 플로트는 그것들을顶部 정렬만 할 뿐, 수동으로 클리어해야 합니다 (플로트의 영향). 절대 위치 지정은 일부 요소를 표준 문서 플로우에서 벗어나게 하여, 주변 요소에 영향을 미치지 못하게 합니다. 그리고 가장 작은 변경조차 고정된 margin 과 padding 을 파괴합니다

그러나 또 다른 역할이 있습니다: vertical-align 입니다. 저는 이것이 더 신뢰할 수 있다고 생각합니다. 기술적으로, vertical-align 로 레이아웃을 구현하는 것은 hack 입니다. 왜냐하면 이것은 레이아웃을 위해 설계된 것이 아니라, 텍스트와 그 옆의 요소를 정렬시키기 위한 것이기 때문입니다. 그러나 vertical-align 로 다른 환경에서 유연하고 세밀하게 (fine-grained) 요소를 정렬시킬 수도 있습니다. 요소의 크기를 알 필요가 없고, 요소는 여전히 표준 문서 플로우 중에 있으며, 다른 요소는 그 크기 변화에 반응할 수 있습니다. 이러한 장점들로 인해 가치 있는 선택지가 되었습니다

vertical-align 의 변덕

그러나 vertical-align 은 때때로 정말 성가시고, 사용하면 좌절감을 느낍니다. 신비로운 규칙이 몇 가지 있는 것 같습니다. 예를 들어, 요소의 vertical-align 을 변경해도 자신 자신의 정렬 방식이 변하지 않고, 같은 행의 다른 요소 (의 정렬 방식) 가 변하는 것을 마주칠 수 있습니다! 지금도 가끔 이러한 어두운 모서리에迷い込み, 미치게 만듭니다 (tearing my hair)

불행히도, 대부분의 관련 리소스는 너무 얕습니다. 특히 vertical-align 로 레이아웃을 구현하고 싶을 때. 그들은 요소 내의 모든 것을 수직으로 정렬하려는 잘못된 생각에 초점을 맞추고, 속성의 기본적인 소개를 하며, 매우 간단한 시나리오에서의 요소 정렬 방식을 설명하지만, 테크닉적인 부분은 설명하지 않습니다

그래서, 저는 일거영일逸로 vertical-align 의 동작을 명확히 하는 목표를 자신에게課し, W3C 의 CSS 사양 을 깊이 파고들고, 몇 가지 예를 시도하여 끝냈습니다. 최종 성과가 본문입니다

자, 게임 규칙부터 시작하겠습니다

vertical-align 의 의존항

vertical-align 은 인라인 레벨 (inline-level) 요소를 정렬시키기 위해 사용됩니다. 즉, display 속성의 계산 값이 다음과 같은 경우입니다:

• inline

• inline-block

• inline-table (본문에서는 고려하지 않습니다)

인라인 요소 (inline elements) 는 기본 태그로 감싸인 텍스트입니다

인라인 - 블록 요소 (inline-block elements) 는 그 이름이 말하는 그대로입니다: 인라인으로 사는 블록 요소 (block elements living inline). 그것들은 width, height(또는 그 콘텐츠에 의해 결정될 수 있음) 와 padding, border 및 margin 을 가질 수 있습니다

인라인 레벨 요소 (inline-level elements) 는 한 행 중에서 하나씩 나열되고, 현재 행에 들어가지 못하면, 그 아래에 새로운 행을 생성합니다. 이들 모든 행은 소위 행 박스 (line box) 를 가지며, 그 행의 모든 콘텐츠를 감쌉니다. 다른 크기의 콘텐츠는 높이가 다른 행 박스를 의미합니다. 아래 그림에서 행 박스의 상하 경계는 빨간 선으로 표시되어 있습니다:

A tall in a line of text.
A short in a line of text.
This can happen.

행 박스는 우리의 컨텍스트입니다 (the line boxes trace out the field we are playing on). 이들 행 박스 중의 vertical-align 속성이 각 요소를 정렬시키는 책임을 집니다. 그렇다면, 요소 정렬이란 도대체 무엇일까요?

baseline 과 outer edge

수직 정렬에서 가장 중요한 참조점은 관련 요소의 baseline 입니다. 某些情况下, 요소의 감싸기 박스의 頂邊과 底邊도 중요합니다. 각 종류 요소의 baseline 과 outer edge 가 어디에 있는지 함께 봅시다:

인라인 요소

-->

<!--

-->

3 행의 병렬한 텍스트가 보입니다. 행 높이의 頂邊과 底邊은 빨간 선으로 표시되고, 폰트의 높이는 초록선, baseline 은 파란 선입니다. 왼쪽 텍스트의 행 높이는 font-size 와 같게 설정되어, 초록선과 빨간 선이 重合했습니다. 중앙 텍스트의 행 높이는 font-size 의 2 배입니다. 오른쪽 행 높이는 font-size 의 절반입니다

인라인 요소의 outer edge 는 그 행 높이의 頂邊과 底邊과 정렬됩니다. 행 높이가 폰트의 높이보다 작으면 문제없습니다. 따라서, outer edge 는 위 그림 중의 빨간 선입니다

인라인 요소의 baseline 은 문자가 앉아 있는 선입니다 (baseline is the line, the characters are sitting on). 즉 그림 중의 파란 선입니다. 이해하기 어려운 것은, baseline 이 때때로 폰트 높이의 아래쪽에 있다는 것입니다. W3C 사양의 상세 정의 를 참조

인라인 - 블록 요소

-->

<!--

-->

왼쪽에서 오른쪽으로 순서대로: 플로 내 (in-flow) 콘텐츠 (저 "c") 를 포함하는 인라인 - 블록 요소, 플로 내 콘텐츠와 overflow: hidden 을 포함하는 인라인 - 블록 요소, 플로 내 콘텐츠를 포함하지 않는 (그러나 콘텐츠 영역은 높이를 가짐) 인라인 - 블록 요소입니다. margin 의 경계는 빨간 선으로 표시되고, border 는 노란색, padding 은 초록색, 콘텐츠 영역은 파란색입니다. 각 인라인 - 블록 요소의 baseline 은 파란 선으로 표시되어 있습니다

인라인 - 블록 요소의 outer edge 는 그 margin-box 의 頂邊과 底邊입니다. 즉 그림 중의 빨간 선입니다

인라인 - 블록 요소의 baseline 은 요소가 플로 내 콘텐츠를 포함하는지 여부에 의존합니다:

• 플로 내 콘텐츠를 포함하는 경우, 인라인 - 블록 요소의 baseline 은 일반 플로 중의 마지막 콘텐츠 요소의 baseline 입니다 (왼쪽 예). 마지막 요소의 baseline 은 그 자신의 규칙에 따라 결정됩니다

• 플로 내 콘텐츠를 포함하지만 계산 값이 비 visible 의 overflow 속성을 가지는 경우, baseline 은 margin-box 의 底邊입니다 (중앙 예). 따라서, 그것은 인라인 - 블록 요소의 底邊과 같습니다

• 플로 내 콘텐츠를 포함하지 않는 경우, baseline 도 margin-box 의 底邊입니다 (오른쪽 예)

행 박스

x This can happen.

위 그림에서는, 행 박스의 텍스트 박스 (자세한 내용은 후술) 의 頂邊과 底邊을 초록색으로 그리고, baseline 은 파란 선 그대로, 텍스트 요소에 회색 배경을 설정하여 하이라이트 마크했습니다

행 박스의 頂邊은 그 행의 가장 높은 요소의 頂邊과 정렬되고, 底邊은 그 행의 가장 낮은 요소의 底邊과 정렬됩니다. 위 그림에서 빨간 선으로 표시된 부분입니다

행 박스의 baseline 은 가변입니다:

CSS 2.1 does not define the position of the line box's baseline. — the W3C Specs

이것은 vertical-align 을 사용할 때 가장 사람을 혼란시키는 부분일 수 있습니다. 즉, baseline 을 어디에 두는지는 다른 모든 조건을 만족해야 합니다. 예를 들어 vertical-align 과 행 박스의 높이를 최소로 하는 것입니다. 그것은 방정식 중의 자유 파라미터입니다

행 박스의 baseline 은 보이지 않기 때문에, 어디에 있는지 직관적으로 볼 수 없습니다. 그러나 쉽게 가시화할 수 있습니다. 의문이 있는 행의 선두에 문자를 추가하기만 하면 됩니다. 그림에 추가한 "x"처럼. 이 문자가 어떤 방식으로든 정렬되지 않은 경우, 디폴트로 baseline 에 앉습니다

baseline 의 주위에서, 행 박스는 텍스트 박스 (text box) 라고 불리는 것을 포함합니다. 텍스트 박스는 정렬 방식이 없는 행 박스 중의 인라인 요소로 간단히 여길 수 있습니다. 그 높이는 그 부모 요소의 font-size 와 같습니다. 따라서, 텍스트 박스는 행 박스 중에서 포맷되지 않은 텍스트만을 감쌉니다. 위 그림에서 초록선으로 표시되어 있습니다. 이 텍스트 박스는 baseline 에 묶여 있기 때문에, baseline 이 움직일 때 함께 움직입니다 (주: 이 텍스트 박스는 W3C 사양에서 strut 라고 불립니다)

이것이 가장 어려운 부분이었습니다. 이제, 우리는 근저까지 알았습니다. 가장 중요한 몇 가지를 빠르게 정리하겠습니다:

• 행 박스라고 불리는 영역이 있습니다. 수직 정렬이 발생하는 곳입니다. 그것은 baseline, 텍스트 박스 및 頂邊底邊을 가집니다

• 인라인 레벨 요소는 정렬되는 것입니다. 그것들은 baseline 과 頂邊底邊을 가집니다

vertical-align 의 값

위에서 언급한 참조점과 인라인 레벨 요소에 특정 관련을 설정하기 위해 vertical-align 을 사용합니다

요소의 baseline 을 행 박스 baseline 에 대해 정렬

x baseline sub super -50% +10px

• baseline: 요소의 baseline 은 행 박스의 baseline 과 정확히 重合합니다

• sub: 요소의 baseline 을 행 박스 baseline 의 아래쪽으로 이동합니다

• super: 요소의 baseline 을 행 박스의 baseline 의 위쪽으로 이동합니다

• <percentage>: 요소의 baseline 을 행 박스의 baseline 에 대해 line-height 의 百分比로 이동합니다

• <length>: 요소의 baseline 을 행 박스의 baseline 에 대해 절대 길이로 이동합니다

요소의 outer edge 를 행 박스 baseline 에 대해 정렬

x middle

• middle: 요소의 頂邊底邊 사이의 중점을 행 박스의 baseline 에 x-height 의 절반을 더한 것과 정렬합니다

요소의 outer edge 를 행 박스의 텍스트 박스에 대해 정렬

x text-top text-bottom

• text-top: 요소의 頂邊을 행 박스의 텍스트 박스의 頂邊과 정렬합니다

• text-bottom: 요소의 底邊을 행 박스의 텍스트 박스의 底邊과 정렬합니다

요소의 outer edge 를 행 박스의 outer edge 에 대해 정렬

x top bottom

• top: 요소의 頂邊을 행 박스의 頂邊과 정렬합니다

• bottom: 요소의 底邊을 행 박스의 底邊과 정렬합니다

물론, 공식의 정의 는 W3C 사양에서 모두 찾을 수 있습니다

왜 vertical-align 의 동작은 이럴까

특정 시나리오에서의 수직 정렬을 더 가까이서 볼 수 있습니다. 특히 실패할 가능성이 있는 시나리오입니다

중앙 정렬의 작은 아이콘

저를 괴롭히는 문제가 있습니다: 작은 아이콘이 있고, 옆의 한 줄 텍스트와 중앙 정렬하고 싶습니다. 작은 아이콘에 vertical-align: middle 을 붙이는 것만으로는 중앙 정렬 효과가 그다지 만족스럽지 않습니다. 이 예를 보세요:

<!-- left mark-up -->
<span class="icon middle"></span>
Centered?

<!-- right mark-up -->
<span class="icon middle"></span>
<span class="middle">Centered!</span>

<style type="text/css">
  .icon   { display: inline-block;
            /* size, color, etc. */ }

  .middle { vertical-align: middle; }
</style>

여기에도 같은 예가 있지만, 위에서 배운 보조선을 몇 개 그렸습니다:

이것은 몇 가지 단서를 밝힙니다. 왼쪽 텍스트에는 정렬 방식이 없기 때문에, baseline 에 앉습니다. 실제로, vertical-align: middle 을 설정하여 작은 方块을 정렬할 때, 그것을 上伸部 (ascender) 가 없는 작은 문자의 중심 위치 (半个 x-height) 에 정렬시키고 있습니다. 따라서, 上伸部를 가진 문자는 비교적 위에 표시됩니다

오른쪽의 경우, 폰트 영역의 중점도 수직으로 정렬시키고, 텍스트의 baseline 을 행 박스 baseline 에 대해 조금 내려 효과를 실현합니다. 결과는 텍스트와 인접한 작은 아이콘이 아름답게 중앙 정렬됩니다

행 박스 baseline 의 이동

이것은 vertical-align 을 사용할 때의 일반적인 함정입니다: 행 박스의 baseline 은 그 행의 모든 요소의 영향을 받습니다. 어떤 요소가 이 방식으로 정렬되어 있다고 가정합니다 (자신의 baseline 에 대해 정렬). 행 박스의 baseline 은 이동해야 합니다. 대부분의 수직 정렬 (top 과 bottom 을 제외) 은 그 baseline 에 대해 상대적이기 때문에, 그 행의 다른 모든 요소도 위치를 조정합니다

몇 가지 예:

• 한 행에 높은 요소가 전체 높이를 가로지를 경우, vertical-align 은 그것에 대해 기능하지 않습니다. 그 頂部의 위와 底部의 아래에 이동할 수 있는 공간이 더 이상 없기 때문입니다. 행 박스 baseline 에 대한 그 정렬 관계를 만족시키기 위해, 행 박스 baseline 은 이동해야 합니다. 낮은 方块은 vertical-align: baseline 을 가집니다. 왼쪽에서, 높은 方块은 text-bottom 정렬입니다. 오른쪽은 text-top 정렬입니다. baseline 이 낮은 盒子를 함께 데리고 뛰어올라간 것을 발견할 수 있습니다

  <!-- left mark-up -->
  <span class="tall-box text-bottom"></span>
  <span class="short-box"></span>

  <!-- right mark-up -->
  <span class="tall-box text-top"></span>
  <span class="short-box"></span>

  <style type="text/css">
    .tall-box,
    .short-box   { display: inline-block;
                  /* size, color, etc. */ }

    .text-bottom { vertical-align: text-bottom; }
    .text-top    { vertical-align: text-top; }
  </style>

다른 vertical-align 값으로 높은 요소를 정렬할 때에도 같은 동작이 발생합니다

• vertical-align 을 bottom(왼쪽 그림) 과 top(오른쪽 그림) 으로 설정해도 baseline 을 이동합니다. 이는 이상합니다. baseline 이 전혀 관계없기 때문입니다

  <!-- left mark-up -->
  <span class="tall-box bottom"></span>
  <span class="short-box"></span>

  <!-- right mark-up -->
  <span class="tall-box top"></span>
  <span class="short-box"></span>

  <style type="text/css">
    .tall-box,
    .short-box { display: inline-block;
                 /* size, color, etc. */ }

    .bottom    { vertical-align: bottom; }
    .top       { vertical-align: top; }
  </style>

• 한 행에 2 개의 큰 요소를 놓고, 그것들을 수직으로 정렬하면 baseline 을 그것들의 정렬 방식을 만족시키는 위치로 이동하고, 행 박스의 높이도 조정합니다 (왼쪽 그림). 3 번째 요소를 추가하고, 그 정렬 방식이 행 박스의 경계를 초과하지 않으면, 행 박스의 높이도 baseline 의 위치도 영향받지 않습니다 (중간 그림). 그것이 행 박스의 경계를 초과하면, 행 박스의 높이와 baseline 은 다시 조정됩니다. 이 경우, 최초의 2 개 方块은 밀려 내려갑니다 (오른쪽 그림)

  <!-- left mark-up -->
  <span class="tall-box text-bottom"></span>
  <span class="tall-box text-top"></span>

  <!-- mark-up in the middle -->
  <span class="tall-box text-bottom"></span>
  <span class="tall-box text-top"></span>
  <span class="tall-box middle"></span>

  <!-- right mark-up -->
  <span class="tall-box text-bottom"></span>
  <span class="tall-box text-top"></span>
  <span class="tall-box text-100up"></span>

  <style type="text/css">
    .tall-box    { display: inline-block;
                   /* size, color, etc. */ }

    .middle      { vertical-align: middle; }
    .text-top    { vertical-align: text-top; }
    .text-bottom { vertical-align: text-bottom; }
    .text-100up  { vertical-align: 100%; }
  </style>

인라인 레벨 요소 아래에 작은 간격이 있을 수 있습니다

이 상황을 보세요. 리스트 내의 li 를 vertical-align 할 때, 자주 마주칩니다:

<ul>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
</ul>

<style type="text/css">
  .box { display: inline-block;
         /* size, color, etc. */ }
</style>

그림에 표시된ように, 리스트 항목은 baseline 에 앉습니다. baseline 의 아래에는 텍스트의 下延部 (descender) 를 수용하기 위한 공간이 있어, 간격을 造成합니다. 해결책은? baseline 을 조금 더 멀리 이동시키기만 하면 됩니다. 예를 들어, vertical-align: middle 로 리스트 항목을 정렬합니다:

<ul>
  <li class="box middle"></li>
  <li class="box middle"></li>
  <li class="box middle"></li>
</ul>

<style type="text/css">
  .box    { display: inline-block;
            /* size, color, etc. */ }

  .middle { vertical-align: middle; }
</style>

이 시나리오는 텍스트 콘텐츠를 포함하는 인라인 - 블록 요소에는 나타나지 않습니다. 콘텐츠는 이미 baseline 으로 이동되었기 때문입니다

인라인 레벨 요소 간의 간격이 레이아웃을 파괴

이것은 주로 인라인 레벨 요소 자신의 문제이지만, 그것들은 vertical-align 의 의존항 중 하나이기 때문에, 분명히 이해해 두는 것이 좋습니다

이전 예에서도 리스트 항목 간의 간격이 보였습니다. 간격은 마크업 코드 (HTML/XML 등) 에 나타나는 인라인 요소 간의 공백 문자에서 옵니다. 인라인 요소 간의 모든 공백 문자는 1 개의 스페이스로 통합됩니다. 이 스페이스가 방해를 합니다. 예를 들어 2 개의 인라인 요소를仅挨在一起하게 하고, 양쪽에 width: 50% 를 설정하고 싶다면, 2 개의 50% 요소와 1 개의 스페이스를 수용할 충분한 공간이 없습니다. 따라서 2 행으로拆分되어 레이아웃을 파괴합니다 (왼쪽 그림). 간격을 제거하기 위해, 공백 문자를 제거해야 합니다. 예를 들어 HTML 주석을 사용합니다 (오른쪽 그림)

<!-- left mark-up -->
<div class="half">50% wide</div>
<div class="half">50% wide... and in next line</div>

<!-- right mark-up -->
   <div class="half">50% wide</div><!--
--><div class="half">50% wide</div>

<style type="text/css">
  .half { display: inline-block;
          width: 50%; }
</style>

vertical-align 揭秘

네,就是这样. 규칙을 알면 그다지 복잡하지 않습니다. vertical-align 이 효과가 없을 경우, 이러한 문제만 고려하면 됩니다:

• 행 박스의 baseline 과 頂邊底邊은 어디에 있는가?

• 인라인 레벨 요소의 baseline 과 頂邊底邊은 어디에 있는가?

이것은 문제의 해결책을 밝힙니다

二.테크닉

1.행 박스의 baseline 을 어떻게 확정하는가?

이 행에 下延部가 없는 문자를 추가합니다. 일반 습관으로는 x 를 추가합니다. 문자의底部 縁이 행 박스 baseline 의 위치입니다

예를 들어:

.baseline:before {
    content: 'x';
}

2.행 박스의 경계를 어떻게 확정하는가?

위에서 언급한「요소의 outer edge 를 행 박스의 outer edge 에 대해 정렬」을 이용합니다:

.line-box-top {
    border-top: 1px dotted red;
    /* border-top 을 행 박스의 頂邊과 重合시킴 */
    vertical-align: top;

    /* 폭을 整行에 채움 */
    display: inline-block;
    width: 100%;
    /* 공간을 열어, 콘텐츠 레이아웃에 영향하는 것을 피함 */
    margin-right: -100%;
    /* z 를 올려, 콘텐츠에 가려지는 것을 피함 */
    position: relative;
    z-index: 10;
}
/* .line-box-bottom 도 이와 유사 */

행 박스 경계를 명확히 하고 싶은 행의행首에 추가합니다 (margin-right: -100% 를 사용하기 때문에, 가장 왼쪽에 둡니다)

<span class="line-box-top"></span><span class="line-box-top"></span>

即可

3.텍스트 박스의 경계를 어떻게 확정하는가?

행 박스 경계를 확정하는 방법과 유사합니다. vertical-align: text-top; 과 vertical-align: text-bottom; 을 이용합니다

누구에 대해 정렬하는가. 그러면 이「누구」를 그릴 수 있습니다

4.HTML 주석으로 공백 문자를 제거하는 테크닉

예를 들어:

<figure>
    <span class="large font">
        <span class="green dotted line text-top"> </span><!--
     --><span class="green dotted line text-bottom"> </span><!--
     --><span class="red dotted line top"> </span><!--
     --><span class="red dotted line bottom"> </span><!--
     --><span class="blue dotted line baseline"> </span><!--
     --><span class="font color-grey inline-overlay">x</span><!--
     --><span class="center">
            <span class="middle bg-grey">This</span>
            <span class="tall box bg-grey text-top"> </span>
            <span class="top bg-grey">can</span>
            <span class="tall box bg-grey text-bottom"> </span>
            <span class="bottom bg-grey">happen.</span>
        </span>
    </span>
</figure>

공백 문자를 제거함과 동시에, 태그의 인덴트 형식을 보존합니다. 매우 재미있습니다