하지만 이럴 경우에는 마지막 부분에 clear:both로 더이상 div가 좌측으로 쏠리지 않도록 처리해 주어야 하는데.. 이게 참 귀찮다..
그래서 찾아본, float:left와 비슷한 방식중에 display:inline-block라는 속성이 있는데, 글자 그대로 div를 나열된 블럭으로 취급해서 보여준다는 것이다.
하지만... 이것도 문제가 있는데.. div사이에 공백이 생긴다는 것이다.
예를들어
<div style='display:inline-block;'>first</div><div style='display:inline-block;'>second</div><div style='display:inline-block;'>first</div>
<div style='display:inline-block;'>second</div>
<div style='display:inline-block;'>first</div> <div style='display:inline-block;'>second</div>
이유는 첫번째 div와 두번째div사이에 공백이 존재하기 때문이다.
이를 해결하기 위해선 맨 위에서처럼 div를 공백없이 붙여 쓰거나,
<div style='display:inline-block;'>first</div><!-- --><div style='display:inline-block;'>second</div>그 외에 div의 style에 'margin-right:-5px'식으로 margin을 없애 버리는 편법도 있다.
좀더 자세한 내용은 아래 링크를 보고 참고 하기 바란다.
링크 : https://css-tricks.com/fighting-the-space-between-inline-block-elements/
삭제 대비용 원본글 복사
I've seen this come up a couple of times lately on Twitter and then an interesting Dabblet so I figured it would be an important thing to document.
Here's the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them.
In other words:
<nav> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a> </nav> nav a { display: inline-block; padding: 5px; background: red; }Will result in:
Often highly undesirable
We often want the elements to butt up against each other. In the case of navigation, that means it avoids the awkward little unclickable gaps.
This isn't a "bug" (I don't think). It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. That's not to say the spec couldn't be updated to say that spaces between inline-block elements should be nothing, but I'm fairly certain that is a huge can of worms that is unlikely to ever happen.
Here's some ways to fight the gap and get inline-block elements sitting directly next to each other.
Remove the spaces
The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, or one of these tricks:
<ul> <li> one</li><li> two</li><li> three</li> </ul>or
<ul> <li>one</li ><li>two</li ><li>three</li> </ul>or with comments...
<ul> <li>one</li><!-- --><li>two</li><!-- --><li>three</li> </ul>They're all pretty funky, but it does the trick.
Negative margin
You can scoot the elements back into place with negative 4px of margin (may need to be adjusted based on font size of parent). Apparently this is problematic in older IE (6 & 7), but if you don't care about those browsers at least you can keep the code formatting clean.
nav a { display: inline-block; margin-right: -4px; }Skip the closing tag
HTML5 doesn't care anyway. Although you gotta admit, it feels weird.
<ul> <li>one <li>two <li>three </ul>Set the font size to zero
A space that has zero font-size is... zero width.
nav { font-size: 0; } nav a { font-size: 16px; }Matt Stow reports that the font-size: 0; technique has some problems on Android. Quote: Pre-Jellybean does not remove the space at all, and Jellybean has a bug whereby the last element randomly has a tiny bit of space.
See research.
Also note, if you're sizing fonts in ems, this zero font size thing can be an issue, since ems cascade the children would also have zero font size. Rems would be of help here, otherwise any other non-cascading font-size to bump it back up.
Another weirdness! Doug Stewart showed me that if you use @font-face with this technique, the fonts will lose anti-aliasing in Safari 5.0.x. (test case) (screenshot).
