CSS margin padding 해도 안 사라지는 공백 (inline-block)

 혹시 CSS 코딩을 하다고 대체 왜 존재하는 건지 모를 망할 공백을 본 적이 있는가? margin, padding을 0으로 만들어도, 도저히 줄일 수 없는 무언가. 내가 겪었던 함정은 이렇다 :

 

#wrap {
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 4px solid #000;
}
 
.container {
    width: 93.75%;
    height: 492px;
    margin: 0 auto;
    border: 4px solid #000;
}
 
.container div {
    display: inline-block;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
}
 
.container div:nth-of-type(1) {
    width: 33.333333333333%;
    background: #e75d5d;
}
 
.container div:nth-of-type(2) {
    width: 66.666666666667%;
    background: #2dcc70;
}

 

 

안 쪽의 초록색 / 빨간색 컨테이너는 각각 33% / 66%의 공간을 차지하고 있어서 정확히 서로 붙어있어야 한다. 위처럼 도저히 안 붙어 있는 경우가 있다. 나는 내 머리로 해결을 할 수 없어서 chatgpt의 힘을 빌려서 해결했다. 코드를 복붙 하니까, gpt가 해답을 알려주었다.

 

사실, 이건 CSS의 문제가 아니라, inline-block과 공백의 문제라고.

 

우문현답...

 

 그렇다. HTML에 내가 쓸 데 없이 공백을 넣어서 생긴 문제였다...

코드가 보기 좋다고 언제나 옳은 코드가 아니라는 사실을 알았다. 그래도 기능을 우선시하는 선에서 가독성을 추구하는 것이 옳구나 라는 생각이다.