CSS3 display:inline-block시 가로 여백

 CSS3에서 display:inline-block시 가로 여백이 발생한다.

다음과 같은 현상인데. 두 상자는 같은 스타일을 지정했으며, 좌측 여백은 존재하지 않는다.

그런데 사이에 이상한 여백이 발생한다.

일단 해당 여백의 정체를 밝히자면 '문자'이다.

위의 소스코드를 올려보자면

문제가 되는 '문자'는 바로 </div>와 <div>사이에 줄 바꿈이다.

원인을 알았으니. 해당 현상에 대해서 해결을 해보자.

1. 소스코드 자체에 줄 바꿈을 삭제한다.

줄 바꿈을 삭제하는 방법에는 여러가지가 있는데.

<div>

    ~~~~

</div><div>

~~~~

</div>

뭐 이런식으로 작성을 하거나.

<div>

    ~~~~

</div><!--

--><div>

    ~~~~

</div>

주석처리를 해버리거나.

본인의 가독성을 희생하는 방법이다.

2. 압축

여기서 압축은 소스코드 사이에 불필요한 부분(주석, 줄바꿈 등)을 삭제하여 소스를 간결하게 만드는 것이다.

웹을 통해서 소스코드가 전달이 되어야 하므로, 압축을 하여서 속도에 최적화를 가져오는 것이므로 하는 것이 좋다.

그러므로 소스코드 압축을 할 예정이라면, 테스트 할 때는 이상하게 보이겠지만, 압축 후에는 정상적으로 보일 것이다.

3. 폰트 크기 줄이기

inline-block이 적용된 요소들의 부모 요소에게 폰트 크기를 0으로 부여한다.

부모 {

     font-size: 0;

}

폰트 크기는 하위 요소에 전달이 되는 경우가 많으므로, 꼭 다시 돌려놓자.

인라인자식 {

     font-size:크기;

}

4. 자바 스크립트

권장하고 싶지 않은 방법이다. 하지만 그냥 이러한 재미난 방법도 있다는 것 정도로 알아두자.

window.addEventListener('load', function() {

     delInlineBlockSpace(DOM객체);

});

function delInlineBlockSpace(obj)

{

     obj.innerHtml = obj.innerHTML.replace(/>\n</g, '');

}

객체 요소는 알아서 넣어주도록 하자.