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.

http://jsfiddle.net/f3f3c/

i know float:left instead of display:inline-block solve problem, wonder if there way without using float.

without altering html have 2 options:

  1. set parent's font-size 0 , reset font-size on inline-blocked children.
  2. position elements absolutely (may through floating or position: absolute)

Comments

Popular posts from this blog

PHPMotion implementation - URL based videos (Hosted on separate location) -

javascript - Using Windows Media Player as video fallback for video tag -

c# - Unity IoC Lifetime per HttpRequest for UserStore -