[css 에러]display:inline, inline-block 생긴거 왜 이래? 여백이 생기네

에러 배경

클론 코딩을 하던 중 margin이나 padding으로 여백으로 만든 적이 없는데 이상한 여백 때문에 원하는 모양이 나오지 않는다.

에러 그 잡채

예를 들면 뉴스스탠드, 언론사편집 등이 써있는 헤더를 보면 원하는 디자인보다 공백이 더 비어있는 모습을 볼 수 있다.

원하는 모양의 웹 디자인

에러가 발생한 부분의 디자인

 

해결 과정

수많은 도전 끝에 내가 알 수 없다고 판단해 구글링을 시도했다.

원인은 display 속성의 값을 inline이나 inline-block으로 사용할 때 코드 상에서의 줄넘김에 의한 여백이었고, 수많은 해결 방법들이 있었다.

1. HTML 처리하기

0.기존 HTML 코드
<header>
    <a>뉴스스탠드</a>
    <a>언론사편집</a>
    <a>엔터</a>
    <a>스포츠</a>
    <a>경제</a>
</header>

1. 닫힘 태그 내리기
<header>
    <a>뉴스스탠드</a
    ><a>언론사편집</a
    ><a>엔터</a
    ><a>스포츠</a
    ><a>경제</a>
</header>

2. 주석 처리하기
<header>
    <a>뉴스스탠드</a><!-- -->
    <a>언론사편집</a><!-- -->
    <a>엔터</a><!-- -->
    <a>스포츠</a><!-- -->
    <a>경제</a>
</header>

3. 붙여쓰기
<header>
    <a>뉴스스탠드</a><a>언론사편집</a><a>엔터</a><a>스포츠</a><a>경제</a>
</header>

 

2. margin 값으로 음수 사용하기

여백이 생겼다면 그만큼 줄이면 되지 않나?라는 발상의 결과물이다.

main {
  display: inline-block;
  margin: -4px;
}

 

3. 부모의 font-size 0으로 사용하기

parent {
  font-size: 0px;
}
child {
  display: inline-block;
}

 

4. 다른 display 속성 사용하기

display에는 inline과 inline-block뿐만 아니라 inline-flex, flex, grid 등 다른 다양한 값들이 있다. 따라서 다른 값을 사용해 같은 스타일로 만드는 방법이 있다.

정리

display 속성의 값을 inline이나 inline-block으로 사용할 때 코드 상에서의 줄넘김에 의해 생기는 여백은 다양한 방법으로 제거할 수 있다.

CSS를 작성하며 스타일을 적용할 때에는 다양한 방법으로 동일하게 보일 수 있다. 따라서 하나에 너무 얽매이지 말고 다른 여러 방법들을 시도하면 좋다.

 

참고 사이트

https://velog.io/@ddingmun8/CSS-