Remove “whitespace” between div element

by

The cleanest way to fix this is to apply the vertical-align: top property to you CSS rules:

#div1 div {
   width:30px;height:30px;
   border:blue 1px solid;
   display:inline-block;
   *display:inline;zoom:1;
   margin:0px;outline:none;
   vertical-align: top;
}

If you were to add content to your div‘s, then using either line-height: 0 or font-size: 0 would cause problems with your text layout.

See fiddle: http://jsfiddle.net/audetwebdesign/eJqaZ/

Where This Problem Comes From

This problem can arise when a browser is in “quirks” mode. In this example, changing the
doctype from:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

to 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

will change how the browser deals with extra whitespace.

In quirks mode, the whitespace is ignored, but preserved in strict mode.

References:

html doctype adds whitespace?

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

More Related Contents:

  1. Margin-Top not working for span element?
  2. How can I remove space (margin) above HTML header?
  3. How would I achieve a shadow that won’t show through transparent text?
  4. Fill in text in HTML5
  5. How to disable margin-collapsing?
  6. Removing body margin in CSS
  7. Does height and width not apply to span?
  8. HTML 5 strange img always adds 3px margin at bottom [duplicate]
  9. Margin top in inline element
  10. How to align two elements on the same line without changing HTML
  11. HTML/CSS – Best practice for preserving white space on certain elements?
  12. Actual table Vs. Div table
  13. How can I ensure that text is inside rounded div?
  14. What is the current state of the “scoped” attribute for the style element in HTML5?
  15. Proper way to apply CSS to HTML5 custom elements
  16. Adjacent divs with angled borders? [duplicate]
  17. How to position a div in the middle of the screen when the page is bigger than the screen
  18. Nested rows with bootstrap grid system?
  19. How to write a caption under an image?
  20. How do I line up 3 divs on the same row?
  21. Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
  22. CSS: How to align vertically a “label” and “input” inside a “div”?
  23. Div side by side without float
  24. Is there any way to add padding to select options via CSS?
  25. Full background image with fade effect
  26. Why box-sizing is not working with width/height attribute on canvas element?
  27. How do I make text bold in HTML?
  28. Center fixed div with dynamic width (CSS)
  29. Is it acceptable to use tables for forms? Or is it still more correct to use divs?
  30. Stacking DIVs on top of each other?

Leave a Comment