css - How to get rid of unwanted space between inline-block columns? -

this question has answer here:

• how remove space between inline-block elements? 32 answers

i'm attempting use css grid widths set in % (so can use responsively) , without using floats (personal dislike!).

in instance, i'm using csswizardry-grids appropriate variables added in. can view demo linked on github page.

there no mention of "container" class assign width grid, added .container (which csswizardry-grids demo has) max-width (in prep other breakpoints later). container has left , right padding allow padding:left on .grid__item within.

.container {     margin: 0 auto;     padding: 0 $gutter;     max-width: 960px; } 

the scss:

.grid__item {     display: inline-block;     padding-left: 32px;     vertical-align: top;     width: 100%;     -webkit-box-sizing: border-box;     box-sizing: border-box; }  .desk--one-third { width: 33.333%; } 

also note box-sizing:border-box not on other element except spec'd csswizardry-grids.scss.

my markup:

<div class="container">      <div class="grid">         <div class="grid__item desk--one-third">             <h1>column 1</h1>          </div>         <div class="grid__item desk--one-third">             <h1>column 2</h1>          </div>         <div class="grid__item desk--one-third">             <h1>column 3</h1>          </div>     </div> </div>       

the problem: in firefox, safari & chrome, last .grid__item falls away.

what see: mysterious gap between '.grid__item's of @ least few pixels. see attached screenshot:

!(http://dl.getdropbox.com/u/7408773/screen%20shot%202013-05-10%20at%2012.51.06%20am.png)

can shed light on me please?

whitespace between inline-block elements

it sounds you're using display: inline-block columns, rather floating them.

the problem using inline-block layout if there's whitespace in html source code between html tags (in case, grid__item divs), there 3-4 pixels of horizontal spacing added between displayed elements.

inline-block intended adding block content flow of paragraph. reason spacing occurs same reason 3-4 px added between 2 words in paragraph: gives series of inline elements in paragraph amount of spacing they're expected have.

there's no css solution that's cross-browser , safe (though negative left margins come closest). there ways edit html code prevent (removing whitespace between tags in source code), present maintainability issues (with high risk of difficult-to-identify issues turning later on when else works on code), , compromises separation of content , presentation (given changes formatting of source code can affect formatting of displayed pages).

comparison of inline-block , floats

both floats , inline-block have disadvantage of not having been intended general layout (e.g., creating variable-height columns in flow of page). argued css positioning , html tables not intended general layout either (or @ least not suited it).

the natural uses each:

• floats: allowing paragraph of text flow around element (usually image)
• inline-block: adding block content inside paragraph (like image), part of paragraph
• css positioning: overlaying 1 element on top of (usually pop-up or dropdown)
• html tables: data grids

historically, each of these has been forced use layout, due lack of other options. eric meyer pointed out here , here, reason floats wound being used layout because of ability clear float (which allows used in wider variety of ways).

choosing right tool

so if neither 1 intended general layout, how choose best 1 use?

the strongest argument against inline-block, on whole, if suitable general layout, there wouldn't such fundamental issue 3-4 px of horizontal spacing added between elements (which never desired when laying out main regions of page -- columns shouldn't behave same words in paragraph of text).

in specific situations, simple rule can applied: cases 3-4 px creates problem, indicates use of inline-block inappropriate. likewise, cases 3-4 px not create problem, suggests may reasonable option.

in practice, i've found floats far more reliable , predictable inline-block, on earlier versions of ie. main hassle floats having manually clear them. adding reliable clearfix css file makes doing relatively manageable though. on modern css grid systems, preferred layout mechanism establishing columns typically floats (based on i've seen far).