0. inline, inline-block에 나타나는 여백
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
.wrap{
width: auto;
height: 50px;
display: inline-block;
background-color: #333;
}
.in-line, .float-left{
width: 100px;
height: 30px;
}
.in-line{
background-color: bisque;
display: inline-block;
}
.float-left{
background-color: chartreuse;
float: left;
}
</style>
</head>
<body>
<!-- display: inline-block; -->
<div class="wrap">
<div class="in-line">1</div>
<div class="in-line">2</div>
<div class="in-line">3</div>
<div class="in-line">4</div>
<div class="in-line">5</div>
</div>
<br><br><br><br>
<!-- float: left; -->
<div class="wrap">
<div class="float-left">1</div>
<div class="float-left">2</div>
<div class="float-left">3</div>
<div class="float-left">4</div>
<div class="float-left">5</div>
</div>
</body>
</html>
위와 같은 구조의 html이 있다. 이는 아래와 같은 그림처럼 나타난다.
float: left; 처리한 div박스들은 여백없이 나타나고 있는데 inline-block처리한 div박스들은 저 미묘한 갭을 가지고 있다.
각 width값을 100px씩 주었으니 wrap의 값은 500px을 나타내야 하겠지만
inline-block으로 처리된 wrap은 522.5의 22.5/4 = 5.625px 정도의 gap을 가지고 있다. (반대로 float처리된 것은 정확하게 500px의 width값을 가지는 것을 개발자도구로 확인할 수 있다)
웃기게도 이 여백은 아래의 코드처럼 한줄로 inline요소를 작성했을 때는 float:left;를 처리한 것과 동일한 형태로 나타나는 것을 확인할 수 있다.
<!-- display: inline-block; -->
<div class="wrap">
<div class="in-line">1</div><div class="in-line">2</div><div class="in-line">3</div><div class="in-line">4</div><div class="in-line">5</div>
</div>
도대체 왜 이렇게 다르게 나타나는 걸까?
결론부터 말하자면
끊어쓰지 않을 경우는 wrap안에 있는 inline요소들을 하나의 IFC섹션으로 컴퓨터는 보기 때문이다. enter가 되었든 space가 되었든 공백을 주는 순간 하나의 inline요소가 되기 때문에 따로따로 나타나게 되지만 두번째의 경우는 공백이 없기 때문에 하나의 IFC섹션으로 여겨진다.
다시 정리하자면, HTML에서는 공백이 없는 연속된 문자열을 하나의 inline으로 본다. 즉, inline 요소들 사이에 공백(space)이나 줄바꿈(enter)이 있을 경우 컴퓨터는 더이상 이것을 하나의 IFC로 인지하지 않고 inline 요소들을 개별적으로 처리하여 각 요소간의 공백이 있는 것으로 취급한다.
(코드스피츠) 초보자를 위한 css와 렌더링의 기본개념
출저 : https://www.edwith.org/codespitz-css-rendering/lecture/14646?isDesc=false [LECTURE] 1 그래픽 시스템 : edwith - hika Maeng(히카맹) www.edwith.org 참고내용 : https://coding-farmer.tistory.com/14 CSS Rendering - 코드 스피츠 76회차
sosol1016.tistory.com
☘️ 정리해보자
① inline요소를 연속되게 쓰면 컴퓨터는 공백이 없는 연속된 문자열을 하나의 inline, IFC섹션으로 본다.
② inline요소에 enter 또는 space를 주게 되면 하나의 IFC섹션이 아닌 개별적 inline으로 처리하고 각 요소간의 공백이 있는 것으로 취급한다.
1. inline 요소의 여백을 제거하는 다양한 방법들
위에서 inline요소의 특징을 살펴보면서 한줄에 한번에 다 적는 방법으로 여백을 없애는 것을 언급하긴 했다. 이 방법 말고도 다양한 방법으로 inline요소의 여백을 없애는 방법들을 사용하고 있다.
1-1. 한줄에 적기
<div class="wrap">
<div class="in-line">1</div><div class="in-line">2</div><div class="in-line">3</div><div class="in-line">4</div><div class="in-line">5</div>
</div>
가독성이 매우 떨어진다는 단점이 있다.
그렇기에 가독성을 개선시킨 방법 또한 존재한다.
1-2. 한줄에 적기 + 가독성 개선
<!-- 닫힘태그를 아래로 -->
<div class="wrap">
<div class="in-line">1
</div><div class="in-line">2
</div><div class="in-line">3
</div><div class="in-line">4
</div><div class="in-line">5</div>
</div>
<!-- 닫힘태그의 >를 아래로 -->
<div class="wrap">
<div class="in-line">1</div
><div class="in-line">2</div
><div class="in-line">3</div
><div class="in-line">4</div
><div class="in-line">5</div>
</div>
<!-- 공백 사이에 주석처리 -->
<div class="wrap">
<div class="in-line">1</div><!--
--><div class="in-line">2</div><!--
--><div class="in-line">3</div><!--
--><div class="in-line">4</div><!--
--><div class="in-line">5</div>
</div>
1-2. margin : -4px 사용하기 (폰트에 따라 달라지는 여백의 값 조정 필요)
inline요소에 생기는 여백은 기본적으로 설정되어 있는 폰트의 16px의 space 간격이다. 그렇기에 이 여백의 값은 글꼴에 따라 달라질 수 있는데 일반적으로는 -4px를 이용하여 요소를 원래의 자리로 이동시킬 수 있다고 한다.
나는 5.625 여백의 값이 적용되어 있으니 이를 적용해보면 아래와 같이 나타난다.
.in-line{
background-color: bisque;
display: inline-block;
margin-right: -5.625px;
}
1-3. font-size를 0으로 설정
부모에게 font-size: 0;으로 설정하면 공백이 사라지는 것을 볼 수 있다.
1-4. float 사용하기
간편하게 float를 사용하여 이 여백들을 없앨 수도 있다. (inline과 계속해서 비교되어져서 나왔던 아래의 float: left)
하지만, float를 적용했을 때에는 clear를 까먹지 말아주자!
☘️ 좀 더 간결하게 정리하자면
한줄로 나타내고 싶을 때는 display: inline-block;이 좋을 수도 있지만
공백이 없이 한줄로 나타내고 싶을 때는 float: left;가 더 간편할 수도 있다.
참고자료
https://sosol1016.tistory.com/87
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
