div 를 inline-block 으로 했을 때 생기는 간격, 여백에 대하여

 

 

 

한 공간을 왼쪽, 오른쪽으로 두 개의 div 로 나눠서 디자인했다.

 

 

코딩할 때 float 를 써도 되지만

 

inline-block을 써도 되니깐

 

왼쪽, 오른쪽 div 에 inline-block을 주고

 

왼쪽 width 70%, 오른쪽 width30% 를 줬다.

 

70+30이 100이니까 원래는 아무 이상없이 한 줄에 두개의 div가 놓여야 하는데

 

 

 

 

 

오른쪽 div 가 아래로 내려가있다...

 

아씨.. 왜이러는겨...

 

왼쪽 div width 를 줄여보니 이제 한 줄에 같이 나온다.

 

 

 

 

 

 

 

근데 나란히 착 붙어있는게 아니라

 

 

 

이렇게 살짝 갭이 있다. 이건 어디서 생긴 여백이냐...

 

 

 

 

 

margin, padding을 0 으로 해봐도 소용없다.

 

 

 

 

 

 

왜 그런가 찾아봤더니

 

 

 

쉽게 얘기해서, 코딩할 때

 

<div>왼쪽 박스</div>

<div>오른쪽 박스</div>

 

보통 이렇게 코딩을 하는데, 

 

윗줄 아랫줄 사이에 엔터가 들어가서

 

그 엔터가 폰트사이즈 만큼의 글자폭을 갖고 

 

자리를 차지하고 있어서 그렇다고 한다...

 

 

 

 

그래서  

 

<div>왼쪽 박스</div><div>오른쪽 박스</div>

 

이렇게 붙여서 쓰면 여백 없이 착 붙어있는 걸 볼 수가 있다. 헐... ㅋㅋㅋ

 

 

 

근데 붙여 쓰면 이래저래 가독성이 떨어지니까

저렇게 하는건 비추고

 

 

 

 

왼쪽 박스 div 에 margin-right: -4px 를 주는 것도 방법이지만

해당 공간의 폰트 사이즈에 따라서 여백이 조금 남아있을 수도 있고,

브라우저마다 달라질 수 있는 여지가 있으니까 이것도 비추.

 

 

 

 

 

깔끔한건 역시나 float를 쓰는 거였다.

 

 

 

 

 

암튼 왜 엔터 때문에 간격이 생기는 거였구나...

 

 

 

 

 

같은 이유로 이미지를 넣을때

 

이미지 두 개 사이에 작은 여백이 생기는건

 

이미지 태그의 display 가  inline 이기 때문이다. 

 

그리고 이미지 태그들 사이의 엔터가 그렇게 만든 것일 것이다.

 

이 또한 float 를 쓰면  여백이 없어진다.

 

 

 

 

 

 

이 내용이 도움이 되었다면

광고를 사정없이 클릭 혹은 터치를 해주세요.

광고 노출 자체로는 거의 수익이 나지 않는 소소한 블로그랍니다 ^^