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