inline / inline-block 자동생성되는 여백 조절!

display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열되지요. 이 때 요소와 요소 사이에 여백이 생깁니다. 이를 해결하는 방법을 기록하겠습니다.

 

공백이 생기는 이유:

HTML에서는 줄 바꿈(개행)은 공백으로 해석되어, 인라인 요소들 사이에 줄 바꿈이 존재하면 공백으로 처리됩니다.
HTML 작성에 줄 바꿈이 있다면 이 줄 바꿈은 공백으로 취급되어 렌더링 시에 간격이 생깁니다.

 

html

    <h2>줄 바꿈(개행)은 공백으로 해석</h2>
    <span>새우깡</span>
    <span>감자깡</span>
    <span>먹태깡</span>

줄바꿈 결과

 

html

    <h2>줄 바꿈(개행)없이 한줄로 나열</h2>
    <span>새우깡</span><span>감자깡</span><span>먹태깡</span>

한줄 나열 결과

하지만 줄바꿈없이 작업하면 가독성이 떨어지고 작성하다 보면 나도 모르게 줄바꿈을 할 수 있잖아요?

그렇기 때문에 이를 보안할 방법을 찾아봤습니다.

 

 

방법1: margin 이용하기

margin 값을 음수로 지정,  -4px 정도면 여백이 없어짐.

비추천 브라우저나 기기별 정확히 4px 차이가 나는게 아니기에 사용시 적용되는 스타일이 디테일하게 보면 다름.

 

css

 

span {margin-right: -4px;}

 

방법2: 상위태그(부모태그)에 font-size 이용하기

부모태그에 font-size:0 을 주고 넣고자하는 inline-block 태그에 다시 원하는 font-size 지정

 

html

    <div>
        <span>새우깡</span>
        <span>감자깡</span>
        <span>먹태깡</span>
    </div>

css

        div {font-size: 0;}
        span {font-size: 16px;}

 

방법3: float 이용하기

display 속성 대신 float 속성을 사용하면 여백이 생기지 않음.

※주의: 부모태그의 ::after에 clear: both; 속성 넣어서 작업시 레이아웃을 깨지지 않게 하기     ➡️ 더알아보기

 

html

    <div>
        <span>새우깡</span>
        <span>감자깡</span>
        <span>먹태깡</span>
    </div>

css

div::after {content: ""; display: block; clear: both;}
span {float: left;}

 

방법4: flex 이용하기

부모태그에 display 속성을 flex를 주고, flex-wrap: wrap을 주면 공백없이 inline-block 속성과 똑같이 쓸수 있음

➡️ 더알아보기

추천 inline-block 자체에 따로 지정없이 부모 값에 지정으로 컨트롤이 가능해서 개인적으로 가장 많이 쓰는 방법

 

html

    <div>
        <span>새우깡</span>
        <span>감자깡</span>
        <span>먹태깡</span>
    </div>

css

div {display: flex; flex-wrap: wrap;}