【CSS】 인라인 (inline) 또는 인라인-블록 (inline-block) 요소들 사이에 생기는 빈 공간 제거하는 5가지 방법

inline 또는 inline-block 요소들 사이에 생기는 빈 공간 제거하는 5가지 방법

[CSS 목차]

inline 또는 inline-block 요소들을 나열해보면, 위와 같이 요소들 사이에 빈 공간이 존재하는 것을 발견할 수 있습니다. 이러한 공간이 생기는 이유를 이해하고, 해결할 수 있는 5 가지 방법에 대해서 알아보겠습니다. 그리고 언제 이런 문제가 발생하는지 실무적인 상황을 보겠습니다.

차례
[1] inline/inline-block 요소들 사이에 공간이 발생하는 이유
[2] 해결방법 3가지
　　[2.1] HTML 요소를 붙여서 작성
　　[2.2] 부모 요소의 글자 크기를 0으로 만듬
　　[2.3] flex를 이용하여 정렬
　　[2.4] float을 이용하여 정렬
　　[2.5] CSS table을 이용
[3] 문제가 발생하는 실제 예제들
　　[3.1] img 요소
　　[3.2] li 요소

[1] inline/inline-block 요소들 사이에 공간이 발생하는 이유

먼저 해결 방법에 앞서, 이러한 문제가 발생하는 이유에 대해서 알아봅니다.

• 목표
  • 이번 카드에서는 문제점을 확인하기 위해 문제가 되는 부분을 코드로 구현합니다.
• <div class=”wrapper”></div>
  • 먼저 코드 아래 부분에 위치한 HTML 파트부터 보겠습니다. div.wrapper (래퍼) 요소를 생성하고, 그 안에 작성할 HTML 요소들을 넣습니다. 래퍼 요소를 사용하면 복잡한 코딩을 할 때, 정렬 면에서 편리해집니다. 자세한 내용은 [1] CSS | Wrapper 포스트에서 다룹니다.
• <span class=”box”>1</span>
  <span class=”box”>2</span>
  <span class=”box”>3</span>
  • 래퍼 요소 안에 3개의 span를 각 줄마다 생성하고, 그 안에 각각의 숫자 1, 2, 3을 넣습니다. span은 inline 요소이기 때문에, span를 통해 inline 요소들 사이에 생기는 공간을 확인할 예정입니다.
• .wrapper의 CSS
  • margin: 0 auto; 래퍼 요소를 수평 가운데 정렬합니다. auto의 의미는 좌/우 여백을 같게 하라는 의미로, 결국 수평 가운데 정렬이 됩니다.
  • max-width: 1180px; 래퍼 요소의 최대 너비를 1180px로 설정합니다. 이는 넓은 모니터나 디바이스에서 1180px 이상으로 커지지 않게 하기 위해서 입니다.
  • 위 두개의 프로퍼티 외에도 래퍼에 작성하는 프로퍼티들에 관한 내용은 [1] CSS | Wrapper 포스트에서 별도로 다루고 있습니다.
• .box의 CSS
  • font-size: 30px; span.box에 들어가는 숫자들의 글자크기를 30px로 설정합니다.
  • border: 2px solid black; span.box의 테두리선을 2px 두께의 검은 실선으로 시각화함으로써, inline 요소들 사이에 생기는 공간을 확인해볼 예정입니다.
• 구현 결과
  • 결과를 보면, span.box들이 검은색 박스로 표시되어져 있습니다. 그리고 span.box들 사이에 공백이 있음을 확인할 수 있습니다. 이 공백이 문제가 되는 것으로, 왜 이런 빈 공간이 생기며, 어떻게 제거할 수 있는지 이번 포스트에서 알아보겠습니다.

• 목표
  • inline 또는 inline-block 요소들 사이에 공백이 생기는 문제의 원인에 대해서 알아보기 위해, span 요소들 사이에 글자를 넣어 보겠습니다.
• <span class=”box”>1</span>0<span class=”box”>2</span>　<span class=”box”>3</span>
  • 다른 코드는 앞 예제와 동일하므로, 중복 설명은 생략합니다. HTML 파트에서 앞 예제와 다른 부분이 무엇일까요? 네, 1번과 2번 span 요소 사이에 숫자 “0”을 넣은 것과 2번과 3번 span 사이에 띄어쓰기를 한 것입니다. 그리고 또 뭐가 있을까요? 앞 코드 부분을 다시 보겠습니다.

• • 보시다시피 앞 예제 코드에서는 span 마다 엔터를 쳐서 줄바꿈을 했었습니다. 엥, 줄바꿈이 중요하냐구요? 네, 여기서는 매우 중요합니다. 이 부분을 이해하기 위해 먼저 위 코드 결과부터 확인해 보겠습니다.
• 출력 결과
  • 출력 결과에서 말씀드리고 싶은 것은 2가지입니다. 첫 번째로, CSS는 inline 요소들 사이에 들어간 글자들도 출력하도록 디자인 되었다는 것입니다. 따라서 1번과 2번 span 사이에 들어간 숫자 0도 표시된 것을 볼 수 있습니다. 이것이 당연한 이야기처럼 들리지만, 두 번째 포인트를 생각해 보겠습니다. 두 번째는 공백문자(space)의 처리 방법에 관한 것입니다. span 요소들 사이에 공백문자가 1개가 들어가던 100개가 들어가던, 출력 결과에서는 두 span 사이에 공백문자 1개만 출력합니다. 2번과 3번 span 사이에 공백 문자가 하나 들어가 있음을 확인할 수 있습니다. 여기까지 이해하셨으면 이제 “줄바꿈”에 대한 이야기를 할 차례입니다. 다음 카드에서 예제와 함께 설명하겠습니다.

• 목표
  • span 사이에 줄바꿈이 일어난 경우에 대해서 생각해 봅니다.
• <span class=”box”>1</span>　<span class=”box”>2</span>
  <span class=”box”>
  • 이번에는 1번과 2번 span 사이에 공백문자(Space)를 넣고, 2번과 3번 span 사이에는 엔터를 쳐서 줄바꿈을 했습니다.
• 구현 결과
  • 출력 결과를 먼저 보겠습니다. 1번과 2번 span 사이는 앞 예제와 같이 공백문자 하나가 들어가 있음을 볼 수 있습니다. 2번과 3번 span을 보면 똑같이 공백문자가 하나 들어가 있습니다. 코드 부분을 다시보면, 우리는 엔터가 들어간 부분에 아무런 문자가 없다고 생각하지만, 실제로는 줄바꿈 문자가 들어가 있습니다. CSS는 이러한 줄바꿈 문자를 공백 문자와 동일하게 처리합니다. 따라서 코드에 줄바꿈이 있으면, 출력결과에서 span 요소들 사이에 공백문자를 하나 집어 넣어서 표시하는 것입니다. 이것이 inline과 inline-block 요소들 사이에 공백이 생기는지에 대한 이유입니다.

• 목표
  • 앞 카드들에서 줄줄이 설명했던 것을 한 줄로 요약하자면, 코드상에서 inline 요소들 사이에 공백 문자와 줄바꿈 문자들이 있다면, 결과 출력시에 공백 문자 하나로 표시한다는 것입니다. 그렇다면, block 요소들 사이에 들어간 공백 문자와 줄바꿈 문자는 어떻게 표시될까요? 이번 카드에서 알아보겠습니다. 중복된 코드는 설명을 생략하겠습니다.
• <div class = “box”>1</div>　<div class = “box”>2</div>　space bar　</div class = “box”>3</div>
  • span 요소 대신에 block 형식을 가지는 div 요소들로 구성해 보겠습니다. 1번과 2번 div 요소 사이에는 공백 문자(스페이스바)를 넣고, 2번과 3번 div 요소들 사이에는 “space bar”란 글자 왼쪽과 오른쪽에 공백 문자를 넣었습니다.
• 구현 결과
  • 출력 결과를 보면, inline 요소들과는 다르게, block 요소들 사이에 들어간 글자 좌우의 공백 문자들 그리고 줄바꿈 문자는 다 생략하고 결과를 출력합니다. 예를 들어 결과를 보면, 1번과 2번 박스 사이에는 어떠한 문자도 들어가 있지 않습니다. 그리고 2번과 3번 박스 사이에는 “space bar”라는 글자가 들어가 있지만 앞과 뒤에 공백 문자가 지워져 있음을 확인할 수 있습니다. 이러한 작동 원리 때문에 block 요소에서는 빈 공간의 문제가 발생하지 않습니다.

[2] 해결 방법 5가지

[2.1] HTML 요소를 붙여서 작성

• 목표
  • 앞 섹션에서 문제의 원인을 확인하였으니, 여기서는 코드 작성시에 HTML 요소들을 붙여서 작성하여 문제를 해결해보겠습니다.
• <span class=”box”>1</span><span …>2</span><span …>3</span>
  • span 요소들을 줄바꿈 없이 한 줄에 다 적었습니다.
• 출력 결과
  • 결과를 보시면, span들이 빈 공간 없이 붙어져 있음을 확인할 수 있습니다. 이는 코드에서 줄바꿈을 제거함으로써 결과 출력시에 공백문자가 들어가는 문제를 해결하였습니다.

• 목표
  • 코드 상에 줄바꿈을 없애는 방법으로 HTML 요소들 사이에 주석을 넣겠습니다. 어떻게 문제가 해결되는지 봐주세요.
• <span class=”box”>1</span><!–
  –><span class=”box”>2</span><!–
  –><span class=”box”>3</span>
  • span 요소들을 사이에 주석 <!– –>을 넣어서 적었습니다.
• 출력 결과
  • 코드 작성시에 span 요소들을 사이에 주석기호를 넣어서 줄바꿈 문자의 삽입을 방지하였습니다. 결과를 보시면, span들이 빈 공간 없이 붙어져 있음을 확인할 수 있습니다.

• 목표
  • 코드 상에 줄바꿈을 없애기 위해 종료 태그를 끊어서 적어주겠습니다. 어떻게 문제가 해결되는지 확인해 보겠습니다.
• <span class=”box”>1</span
• ><span class=”box”>2</span
• ><span class=”box”>3</span>
  • span 요소의 종료태그 </span>을 쪼개서, “>”을 다음 줄에 작성한 것에 유의해 주세요.
• 출력 결과
  • 코드 작성시에 span 요소들의 종료 태그를 쪼개서 작성함으로써 줄바꿈 문자의 삽입을 방지하였습니다. 결과를 보시면, span들이 빈 공간 없이 붙어져 있음을 확인할 수 있습니다. 이런 식으로 여러가지 방법을 사용하여 줄바꿈 문자 삽입을 방지하여, 문제를 해결할 수 있습니다. 하지만 코드 자체가 지저분해 보여 코드의 가독성이 떨어지는 단점이 있습니다. 따라서 개인적으로는 이런 방식을 선호하진 않습니다.

[2.2] 부모요소 글자 크기를 0으로 만듬

• 목표
  • 부모 요소의 글자 크기를 0으로 만들어서, 문제를 해결해보겠습니다.
• .wrapper의 CSS
  • 전체 코드 설명은 섹션 [1]에서 설명을 했으므로 중복 설명은 생략합니다.
  • font-size: 0; span 요소들의 부모 요소인 div.wrapper의 글자 크기를 0으로 설정합니다.
• 출력 결과
  • 결과를 보시면, span들이 빈 공간 없이 붙어져 있음을 확인할 수 있습니다. 다시 한번 원리를 집어보면, 코드상에서 span 요소들 사이에 줄바꿈 문자가 들어가 있기 때문에, 결과 출력시 span 요소들 사이에 공백 문자가 하나씩 들어간다고 하였습니다. 부모 요소의 글자 크기를 0으로 설정해 주면, 삽입된 공백 문자의 크기가 0으로 바뀌기 때문에, span 요소들 사이의 빈 공간들이 사라지는 원리입니다.
• 장점과 단점
  • [2.1] 에서 사용한 HTML 요소를 붙여서 사용하면 코드 가독성이 떨어지는 단점이 있었습니다. 글자 크기를 0으로 설정하는 방식은 코드 가독성을 좋게 유지할 수 있다는 장점이 있습니다. 반면 단점으로는 자식 요소들의 글자 크기를 명시적으로 설정해 줘야한다는 것입니다. 자식 요소의 글자 크기를 따로 지정해주지 않으면, 부모 요소의 글자 크기를 상속 받아서 자식 요소들의 글자 크기가 0이 되고, 결과가 제대로 출력되지 않게 됩니다.

[2.3] flex를 이용하여 정렬

• 목표
  • 부모 요소를 display: flex로 설정하여, 문제를 해결해보겠습니다.
• .wrapper의 CSS
  • 전체 코드 설명은 섹션 [1]에서 설명을 했으므로 중복 설명은 생략합니다.
  • display: flex; 자식 요소들을 flex로 정렬하기 위해, 부모 요소인 div.wrapper의 display를 flex로 설정합니다. 이렇게 설정하면, 자식 요소들은 inline-block 형태로 바뀌고, 수평방향으로 정렬하게 됩니다.
• 출력 결과
  • 결과를 보시면, span들이 빈 공간 없이 붙어져 있음을 확인할 수 있습니다. 이번 해결 방법은 display: flex의 원리를 이용하는 방법입니다. 부모 요소의 display를 flex로 설정하게 되면 2가지 변화가 생기는데, (1) 자식 요소들이 inline-block 형태로 바뀝니다. (2) inline-block 형태로 바뀐 자식 요소들이 수평으로 배치하게 됩니다. 수평으로 배치하는 동안, 공백과 줄바꿈들은 다 제거되기 때문에, 빈 공간 문제를 해결할 수 있습니다.

[2.4] float를 이용하여 정렬

• 목표
  • flex: left를 이용하여 inline 요소들을 정렬하여, 문제를 해결해보겠습니다.
• .box의 CSS
  • 전체 코드 설명은 섹션 [1]에서 설명을 했으므로 중복 설명은 생략합니다.
  • float: left; span.box 요소들은 이미 수평으로 정렬되어져 있지만, float 프로퍼티를 이용하여 다시 수평으로 정렬합니다. float로 정렬하게 되면, 요소들이 inline-block 형식으로 바뀌게 되고, 전환 과정에서 공백문자와 줄바뀜 문자들이 다 없어지게 됩니다. 참고로 flex의 경우에는 부모 요소의 CSS에 작성하지만, float의 경우에는 정렬하고자하는 요소의 CSS에 작성합니다.
• 출력 결과
  • 결과를 보시면, span들이 빈 공간 없이 붙어져 있음을 확인할 수 있습니다. float를 이용하여 요소를 수평으로 정렬하게 되면, 공백문자와 줄바뀜 문자들이 다 사라지면서 수평으로 정렬하게 됩니다. flex와 같은 원리입니다.

[2.5] CSS table을 이용

• 목표
  • display: table을 이용하여, 문제를 해결해보겠습니다. 전체 코드 설명은 섹션 [1]에서 설명을 했으므로 중복 설명은 생략합니다.
• .wrapper의 CSS
  • display: table; 정렬하고자 하는 요소들의 부모 요소인 div.wrapper를 CSS table을 설정해 줍니다. 그리고 여기서는 가운데 정렬이 필요 없으므로 원래 코드에 있던 margin: 0 auto를 제거해 줬습니다. display: table로 설정하면 2가지 일이 벌어지는데, 첫 번째로 div.wrapper가 inline-block 형식으로 바뀐다는 것입니다. 두 번째로 자식 요소들 사이에 공백문자 또는 줄바꿈 문자를 없애버립니다. 자식 요소를 inline-block 형식으로 바꾸는 flex와는 다르게, 자식 요소들의 형식은 바꾸지 않고 그대로 둡니다.
• 출력 결과
  • 결과를 보시면, span들이 빈 공간 없이 붙어져 있음을 확인할 수 있습니다. 부모 요소를 display: table로 설정할 때 발생하는 “자식 요소들 사이에 있는 공백 문자와 줄바꿈 문자를 없애는 성질”을 이용하여, 빈 공간의 문제를 해결하였습니다.

[3] 문제가 발생하는 실제 예제들

[3.1] img 요소

• 목표
  • img 요소들을 나란히 배열할 때, 공간의 문제가 발생함을 확인합니다.
• <div class=”wrapper”></div>
  • 먼저 코드 아래에 위치하고 있는 HTML 파트를 보겠습니다. 래퍼(div.wrapper) 요소를 먼저 생성해 주고, 작성할 HTML를 넣어줍니다. 복잡한 웹페이지에서는 래퍼를 사용하면 요소들을 정렬하는데 편리해집니다.
• <img src=”…” width=”200px”>
  <img src=”…” width=”200px”>
  • 래퍼 안에 img 요소 2개를 넣습니다. src 속성은 이미지 파일의 주소를 넣을 때 사용하고, width 속성은 이미지의 너비 크기를 지정할 때 사용합니다. img 요소는 inline 요소이므로, 두 이미지 사이에 공백이 들어가게 됩니다.
• .wrapper의 CSS
  • margin: 0 auto; 래퍼 요소를 수평 가운데 정렬합니다. auto의 의미는 좌/우 여백의 크기를 같기 만들어 주는 것을 의미합니다. 결론적으로 가운데 정렬하게 됩니다.
  • width: 450px; 래퍼 요소의 너비를 450px로 지정합니다. 자식 요소인 2개의 img 요소들의 전체 크기가 400px이기 때문에 이것보다 큰 450px로 지정합니다. 이렇게 별도로 너비를 지정해주는 이유는 사용자가 작은 디바이스를 사용하거나 작은 모니터를 사용하는 경우를 대비하기 위해서 입니다. 이런 경우에는 두 이미지가 수평으로 배치가 되지 않고, 두 번째 이미지가 다음 줄으로 밀려서 수직으로 배치가 되기 때문에 원하는 빈 공간 문제를 확인할 수 없게 됩니다. 현대 사회에서는 스마트폰과 같은 디바이스들이 다양해졌기 때문에, 작은 모니터 또는 큰 모니터를 항상 고려해줘야 합니다.
• 구현 결과
  • 결과를 보시면, 두 이미지 사이에 공백이 있음을 확인할 수 있습니다. 이는 img 요소가 inline 요소이기 때문에 발생합니다. 해결 방법은 섹션 [2]에서 언급했던 방법들 중 하나로 해결할 수 있습니다. 여기서는 글자 크기를 0으로 바꾸는 방식으로 해결해보겠습니다. 다음 카드에서 예제와 함께 알아보겠습니다.

• 목표
  • 부모 요소의 글자 크기를 0으로 바꿔서, img 요소들을 사이 공백을 제거해보겠습니다.
• .wrapper의 CSS
  • 중복 설명은 생략합니다.
  • font-size: 0; 래퍼의 글자 크기를 0으로 설정합니다.
• 구현 결과
  • 결과를 보시면, 두 이미지 사이에 공백이 제거 되었음을 확인할 수 있습니다. 즉, img 요소들의 부모 요소인 div.wrapper의 글자 크기를 0으로 만듬으로써, 이미지 사이에 들어간 공백 문자 크기를 0으로 만들어서 공간을 제거하였습니다.

[3.2] li 요소

• 목표
  • li 요소들을 inline 형식으로 바꿀 때, 공간의 문제가 발생함을 확인합니다.
• <div class=”wrapper”></div>
  • 먼저 코드 아래에 위치하고 있는 HTML 파트를 보겠습니다. 래퍼(div.wrapper) 요소를 먼저 생성해 주고, 작성할 HTML를 넣어줍니다. 복잡한 웹페이지에서는 래퍼를 사용하면 요소들을 정렬하는데 편리해집니다.
• <ul></ul>
  • 리스트 요소를 작성하기 위해 unordered list (ul)를 적어줍니다.
• <li>First</li>
  <li>Second</li>
  <li>Third</li>
  • li 요소들을 줄을 바꿔서 작성해 주었습니다. 줄바꿈에 의해서 공백의 문제가 발생할 것입니다.
• .wrapper의 CSS
  • margin: 0 auto; 래퍼 요소를 수평 가운데 정렬합니다. auto의 의미는 좌/우 여백의 크기를 같기 만들어 주는 것을 의미합니다. 결론적으로 가운데 정렬하게 됩니다.
  • max-width: 1180px; 래퍼 요소의 최대 너비를 1180px로 설정합니다. 경우에 따라 큰 모니터나 디바이스에서 해당 웹페이지를 출력하게 될 때, 너무 넓게 표시되는 것을 막기 위해서입니다.
• ul의 CSS
  • list-style-type: none; list-style-type는 li 요소들의 앞에 오는 점의 스타일을 설정합니다. 여기서는 점을 표시하지 않도록 하기 위해 none을 넣었습니다.
• li의 CSS
  • border: 1px solid black; 테두리선을 1px 두께의 검정 실선으로 설정합니다.
  • display: inline; li 요소들을 inline 형식으로 바꿔줌으로써 li 요소들이 수평 방향으로 나열되게 만듭니다. li 요소들을 수평으로 나열시키는 방법은 실제 웹페이지를 만들 때 자주 사용되는 방법입니다.
• 구현 결과
  • 결과를 보시면, li 요소들 사이에 빈 공간이 있음을 확인할 수 있습니다. li 요소는 block 형식을 가지고 있지만, 인위적으로 inline 형식으로 변경함으로써 앞서 설명한 빈 공간의 문제가 발생합니다. 해결 방법으로 섹션 [2]에서 제시한 해결 방법 중 하나를 사용할 수는 있지만, 여기서 주의할 점은 “부모 요소의 글자 크기를 0으로 바꾸는 방법”은 적절하지 않다는 것입니다. 왜냐하면 부모 요소의 글자 크기를 0으로 바꾸게 되면, li 요소들의 글자들도 0으로 바뀌게 되기 때문에 li 요소들의 글자 크기들도 지정해줘야 하기 때문입니다.
  • 　li 요소들의 글자 크기를 그냥 지정해주면 되지 않나요? 네, 그렇게 해도 되지만, 상황에 따라서는 글자 크기를 지정해줄 수 없는 경우가 있습니다. 예를 들어, 화면의 크기에 따라 글자들의 기본 크기가 달라지게 디자인되었다고 해보겠습니다. 스마트폰 같이 작은 디바이스에서는 글자 크기를 키우기 위해서 말입니다. 이런 경우에 li 요소들의 글자 크기는 상위 요소로부터 상속 받아야 합니다. 따라서 li 요소들의 글자 크기를 인위적으로 지정할 수도 없고, 부모 요소의 글자 크기를 0으로 바꿀 수도 없습니다. 이런 경우들이 있기 때문에 굳이 상황이 복잡해지는 글자크기를 0으로 바꾸는 방법 대신에, 다른 방법으로 구현하는게 더 편리합니다. 여기서는 flex를 이용하여 해결해 보겠습니다. 다음 카드에서 예제와 함께 알아보겠습니다.

• 목표
  • flex를 이용하여 li 요소들을 정렬 시켜서, 빈 공간 문제를 해결해 보겠습니다.
• ul의 CSS
  • display: flex; 자식 요소인 li 요소들을 수평으로 정렬하기 위해, 부모 요소인 ul 요소에 display: flex를 설정합니다. 앞에서도 설명했듯이, flex를 설정하면 i) 자식 요소들이 inline-block 형식으로 바뀌고, ii) 수평으로 정렬될 때, 요소들 사이의 빈 공간이 없어집니다. 그리고 li의 CSS에 있던 display: inline는 필요가 없으므로 제거해줍니다.
• 구현 결과
  • 결과를 보시면, li 요소들 공백이 제거 되었음을 확인할 수 있습니다. li 요소들을 수평으로 정렬 시킬 경우에는 display: inline을 사용하지 않고, float: left를 사용하거나 부모 요소에 display: flex를 사용하는 경우가 많습니다.

• 목표
  • 섹션 [2]에서 예를 들지 않은 해결 방법 중에 하나를 여기서 소개하고자 합니다. 이 방법은 인터넷 브라우저가 종료 태그 </li>를 자동 추가하게 만들어서 빈 공간 문제를 해결하는 방법입니다.
• <li>First
  <li>Second
  <li>Third
  • 여기서는 li 요소의 “시작 태그 <li>”는 적되, “종료 태그 </li>”는 생략하였습니다. 이렇게 작성하게 되면, 브라우저는 다음 li 요소를 만날 때 종료 태그 </li>을 자동으로 삽입하게 되고, li 요소들 사이에 줄바꿈 문자 삽입을 방지할 수 있습니다.
• 구현 결과
  • 결과를 보시면, li 요소들 공백이 제거 되었음을 확인할 수 있습니다. 코드 작성시에 li 요소를 새로운 줄에 작성할 수 있어서 가독성을 그대로 살릴 수 있는 장점이 있지만, HTML 문법면에서 완전하지 않기 때문에 개인적으로는 추천하는 방식은 아닙니다. 그리고 span 요소의 경우에 다음과 같이 종료 태그 </span>을 적지 않았다고 해봅시다.

• • 이런 경우에는 브라우저는 </span>을 각각의 span 뒤에 넣는 것이 아니라, 다음과 같이 맨 마지막 span에 한 번에 다 넣게 됩니다.

• • 따라서 출력 결과도 li 요소와는 다르게 다음과 같이 나오게 됩니다.

• • 이와 같이 종료 태그를 생략하는 방법은 모든 태그에 사용할 수는 없습니다. 따라서 그냥 재밌는 트릭 정도로 알고 있으면 좋을 것 같습니다.

[참고]
[1] CSS | Wrapper