display: inline-block extra margin [duplicate]

by

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 > div {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  letter-spacing: 1em;
  word-spacing: 2em;
}

The example would then look like this.

<div class="container">
  <div>First</div>
  <div>Second</div>
</div>

A jsfiddle version of this. http://jsfiddle.net/QtDGJ/1/

More Related Contents:

  1. Setting the width of inline elements
  2. A Space between Inline-Block List Items [duplicate]
  3. Is it wrong to change a block element to inline with CSS if it contains another block element?
  4. Margin-Top push outer div down
  5. Problems with CSS sticky footer
  6. Add centered text to the middle of a horizontal rule [duplicate]
  7. White space at bottom of anchor tag
  8. 100% Min Height CSS layout
  9. Making the main scrollbar always visible
  10. Remove outline from select box in FF
  11. How to make div occupy remaining height?
  12. Change checkbox check image to custom image
  13. display:inline with margin, padding, width, height
  14. Specifying Tab-Width?
  15. How to use an tag inside a in the middle of a text? [duplicate]
  16. Stretching tag to fill entire
  17. Padding the top and the bottom of inline element
  18. HTML list-style-type dash
  19. Table vertical header?
  20. What’s the point of valid CSS/HTML?
  21. Block Level Elements inside Inline elements [duplicate]
  22. Table with table-layout: fixed; and how to make one column wider
  23. How do you keep parents of floated elements from collapsing? [duplicate]
  24. Why do browsers match CSS selectors from right to left?
  25. How to remove margin space around body or clear default css styles
  26. Why does the outer here not completely surround the inner ?
  27. background: fixed no repeat not working on mobile
  28. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  29. Same height column bootstrap 3 row responsive
  30. Prevent a centered layout from shifting its position when scrollbar appears

Leave a Comment