display : inline으로 나란히 한 요소의 "틈새"를 채우기 방법 입니다.

요소를 나란히 할 때는 float가 주류이지만, inline과 inline-block을 사용하고자 할 수도 있습니다. 하지만 이러한 inline으로 나란히시킬 때주의하지 않으면 안되는 것이 요소 사이의 "틈새" 이를 해소하는 방법을 정리해 보았습니다.

inline을 사용하면 틈새가 있습니다.

이전부터 자주 화제가되고, 웹 기반 블로그에서도 자주 거론되고있는 display : inline과 inline-block 문제. 목록을 쉽게 가로 수있는 것입니다 만, 각각의 목록 사이에 틈새 수 있다는 문제가 있습니다. 그들에 대응하기 위해 다양한 방법이있는 것입니다.

1. 개행하지

목록을 줄 바꿈없이 설명 할뿐. 이것만으로 틈이 없습니다.

<ul>

<li>가</li><li>나</li><li>다</li>

</ul>

2.li 태그 사이를 주석

어떤 브라우저에서도 문제없이 틈이 해소되어있었습니다. 다만, 이러한 주석 사용을 싫어하는 사람에게는 사용하기 어려움이 있습니다.

3.font-size를 0.1px

사실 0px하고 싶지만, safari에서 0이 잘못 때문에 0.1로합니다. 하지만 텍스트를 사용하는 경우는 그대로라면 문자 크기가 너무 작되어 버리므로, 1px은 부모 요소에 지정하여 자식 요소는 원래 문자 크기를 지정 되돌려드립니다. 단, Windows는 IE7 / IE8 / Safari / Chrome, mac은 Opera / firefox에서 틈새가 해소되지 않았습니다.

<ul>

<li>가</li>

<li>나</li>

<li>다</li>

</ul>

//css//

ul {

 font-size: 0;

}

li {

 display: inline;

 font-size: 14px;

}

4.letter-spacing을 -0.4em

공백 분을 부정적 마진으로 상쇄하는 방법입니다. 텍스트를 사용할 때는 글자 사이가 막힘 너무 때문에 부모 요소에 일단 letter-spacing : -0.4em를 지정하고 자식 요소에서 normal로 전환하여 사용합니다. 상당히, 이제 틈새가 없어 쓰여져있는 블로그도 많은 듯 합니다만...

<ul>

<li>가</li>

<li>나</li>

<li>다</li>

</ul>

ul {

 letter-spacing: -0.4em;

}

li {

 display: inline;

 letter-spacing: normal;

}

windows는 IE7 / Opera, mac은 Opera / firefox에서 틈새가 메워지지 않았다. 또한 Windows chrome / safari와 mac의 Safar에서 이미지가 겹치는 증상까지도.

5.table-cell을 사용

이것이 가장 스마트이었습니다. 그러나 IE8 이하는 비 대응이므로 해킹과 함께 사용합니다. IE8 이하는 일단 inline 한 후 zoom에서 haslayout을 true로하면. 간단합니다. 이것만으로도 내가 확인할 수있는 모든 브라우저에서 틈새 해소했습니다. 단, 테이블 셀을 사용하는 경우는 셀의 margin을 사용할 수없는 거죠. 폭 크기가 정해져있는 경우는 순수하게 float를 사용하는 편이 간단입니까.

<ul>

<li>가</li>

<li>나</li>

<li>다</li>

</ul>

ul {

 letter-spacing: -0.4em;

}

li {

 display: table-cell;

 /* for IE 6/7 */

 *display: inline;

 *zoom: 1;

}

다양하게 시도해 본 결과 "어느 것이 좋을까?"라는 이야기입니다 만, 그것은 환경대로군요. 폭 고정 요소 것이라면 익숙한 float로 구축하는 것이 좋을 것이고, "잠시 틈 따위 문제 없다"라고한다면 inline으로 바삭 바삭 끝내 버려서 좋다고 생각합니다. 업데이트 빈도 나 코드의 투명도 등도 관련이있을 것이며, 어디에서 타협을 넣거나라는 것도 판단 재료의 하나군요.