html - remove pixels between DIVs without deleting whitespace -
.littlebox { margin:2px; padding:5px; width:100px; height:100px; border:1px solid #ccc; display:inline-block; } .divrow { width:100%; height:120px; } <div class="divrow"> <div class="littlebox">first</div> <div class="littlebox">second</div> <div class="littlebox">third</div> </div> <div class="divrow"> <div class="littlebox">first</div><div class="littlebox">second</div><div class="littlebox">third</div> </div>
these 2 render differently, in first row there small space between each div, , in second there none. setting margin 0px still make space visible.
i know float:left instead of display:inline-block solve problem, wonder if there way without using float.
without altering html have 2 options:
- set parent's font-size 0 , reset font-size on inline-blocked children.
- position elements absolutely (may through floating or position: absolute)
Comments
Post a Comment