display inline-block extra margin

Question

I m working with a few divs that are set to display  inline-block and have a set height and width  In the HTML  if there is a line break after each div there is an automatic 5px margin add to the right and bottom of the div    Example    lt div gt Some Text lt  div gt   lt div gt Some Text lt  div gt    Is there a property that I ve overlooked that will allow me to reset the automatic margin   Update  From what I ve found there is no way to remove the margin    except if you either have everything on the same line or  add comments to comment out the line breaks  example    lt div gt Some Text lt  div gt  lt  -- -- gt  lt div gt Some Text lt  div gt    Not the best solution  but still easier to read if you have multiple lines

User · Answer

Can you post a link to the HTML in question   Ultimately you should be able to do   div       margin 0      padding  0      to remove the spacing  Is this just in one particular browser or all of them

User · Answer

Another solution to this is to use an HTML minifier  This works best with a Grunt build process  where the HTML can be minified on the fly     The extra linebreaks and whitespace are removed  which solves the margin problem neatly  and lets you write markup however you like in the IDE  no  lt  li gt  lt li gt

User · Answer

A year later  stumbled across this question for a inline LI problem  but have found a great solution that may apply here     http   robertnyman com 2010 02 24 css-display-inline-block-why-it-rocks-and-why-it-sucks   vertical-align bottom on all my LI elements fixed my  extra margin  problem in all browsers

User · Answer

Cleaner way to remove those spaces is by using float  left     DEMO  HTML    lt div gt Some Text lt  div gt   lt div gt Some Text lt  div gt    CSS   div       background-color  red      float  left      I ts supported in all new browsers  Never got it why back when IE ruled lot s of developers didn t make sue their site works well on firefox chrome  but today  when IE is down to 14 3    anyways  didn t have many issues in IE-9 even thought it s not supported  for example the above demo works fine

User · Answer

After struggling with this issue too many times I found a very elegant solution in HTML 5  In HTML 5 you should not close several  li p etc  tags  the ambition to become XML is forever gone  For example  the preferred way to do a list is    lt ul gt      lt li gt          lt a     gt     lt  a gt      lt li gt          lt a     gt     lt  a gt   lt  ul gt    Browsers MUST close the LI and they must do this without introducing whitespace  solving this problem  If you still have the XML mindset it feels wrong but once you get over that it saves many a nightmare  And this is not a hack since it relies on the wording of the HTML 5 spec  Better  since not closing tags is pervasive I expect no compatibility issues  not tested though   Bonus is that HTML formatters handle this well   A little worked out example  http   cssdesk com Ls7fK

User · Answer

For the record  that margin and padding resetting didn t do the trick for me  but this quote from one of the comments above turned out to be crucial and solved the issue for me   If i put the divs on the same line it margin disappears

User · Answer

I encountered the same problem  What caused it for me were a bunch of whitespaces   amp nbsp   that I inserted  After removing them  the problem was solved

User · Answer

The divs are treated as inline-elements  Just as a space or line-break between two spans would create a gap  it does between inline-blocks  You could either give them a negative margin or set word-spacing  -1  on the surrounding container

User · Answer

font-size  0 to parent container   Source  https   twitter com garand status 183253526313566208

User · Answer

White space affects inline elements   This should not come as a surprise  We see it every day with span  strong and other inline elements  Set the font size to zero to remove the extra margin    container     font-size  0px    letter-spacing  0px    word-spacing  0px      container  gt  div     display  inline-block    margin  0px    padding  0px    font-size  15px    letter-spacing  1em    word-spacing  2em      The example would then look like this    lt div class  container  gt     lt div gt First lt  div gt     lt div gt Second lt  div gt   lt  div gt    A jsfiddle version of this  http   jsfiddle net QtDGJ 1

User · Answer

There are a number of workarounds for this issue which involve word-spacing or font size but this article suggests removing the margin with a right margin of -4px   http   designshack net articles css whats-the-deal-with-display-inline-block

User · Answer

You can get a vertical space even though you have NO WHITESPACE whatsoever between your inline-block elements   For me  this was caused by line-height  The simple fix was   div container       line-height  0    div container  gt          line-height  normal

[html] display: inline-block extra margin

Examples related to html

Examples related to css

Examples related to xhtml