[HTML] 요소 사이의 공백과 해결법

[HTML] 요소 사이의 공백과 해결법

 

 

HTML의 요소 중 'inline-block' 태그에는 문제가 있다.

요소 사이에 공백이 발생한다는 것이다.

 

 

See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.

코드의 문법에 따라 다른 결과가 나타난다.

'span1'과 'span2'는 붙어 있는 반면에 'span3'와 'span4' 사이에는 공백이 있다.

공백이 나타나는 현상은 <span> 태그뿐만 아니라 <img>, <video> 등에서도 나타난다.

 

요소 사이에 공백이 발생하는 현상은 CSS로 요소들의 속성을 선언할 때에 어려움을 줄 수 있다.

위 코드의 첫 번째 줄처럼 한 줄에 태그를 이어 붙이면 공백을 없앨 수 있지만 가독성이 떨어진다.

이 문제를 해결할 수 있는 방법은 다음과 같다.

 

 

한 줄처럼 만들기

• 다음 줄에서 태그 닫기

<span>span1</span
><span>span2</span
><span>span3</span>

 

• 태그 사이에 주석을 넣기

<span>span1</span><!--
--><span>span2</span><!--
--><span>span3</span>

 

두 경우 모두 줄바꿈을 이용하여 HTML이 한 줄처럼 인식할 수 있도록 만든 것이다.

하지만 이 방법을 사용하는 것을 권장하지 않는다고 한다.

 

 

부모 요소 글꼴 크기 0으로 만들기

부모 요소의 'font-size'를 0px로 설정한다.

<div>
	<span>span1</span>
	<span>span2</span>
</div>

 

div {
	font-size: 0px;
}

span {
	font-size: 1rem;
}

 

공백은 결과적으로 텍스트이기 때문에 글꼴 크기를 0으로 지정하면 없어진다.

하지만 하위 요소의 글꼴 크기를 다시 설정해야 한다는 번거로움이 생긴다.

 

 

직접적으로 공백 없애기

요소의 'margin'에 공백 크기만큼의 음수 값을 부여한다.

span {
	margin-right: -4px;
}

 

공백을 정확하게 없애지는 않더라도 확실하게 없앨 수 있는 방법이다.

 

 

위치 관련 속성 사용하기

요소의 위치를 유연하게 설정할 수 있는 CSS 속성을 이용한다.

 

• 'float' 사용

span {
	float: left;
}

 

• 'flex' 사용

body {
	display: flex;
}

 

공백이 문제가 되는 것은 요소의 위치나 크기를 나타낼 때에 정확한 값을 계산하기 힘들기 때문이다.

하지만 위와 같이 요소의 위치를 유연하게 설정할 수 있는 속성을 사용할 때 자동적으로 공백을 고려할 필요가 없어진다.