Remove whitespace between div element

Question

This is my HTML code  lt div id  quot div1 quot  gt       lt div gt  lt  div gt  lt div gt  lt  div gt  lt div gt  lt  div gt  lt br  gt  lt div gt  lt  div gt  lt div gt  lt  div gt  lt div gt  lt  div gt   lt  div gt   My CSS   div1       width 150px height 100px white-space nowrap      border blue 1px solid padding 5px     div1 div       width 30px height 30px      border blue 1px solid      display inline-block       display inline zoom 1      margin 0px outline none     If I insert the  lt  DOCTYPE html gt  before the  lt html gt  tag  the page will look like this   But if I remove the  lt  DOCTYPE html gt  tag  the  whitespace  between the two lines will be remove  But I d like to use  lt  DOCTYPE html gt  tag  it s recommend  but I can t find any CSS rule that can remove that whitespace  I have used margin 0 outline none  etc    but it not work   anyone help me  Thanks   I m not good at English

User · Accepted Answer

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

User · Answer

use line-height  0px   WORKING DEMO  The CSS Code   div line-height 0     This will affect generically to all your Div s  If you want your existing parent div only to have no spacing  you can apply the same into it

User · Answer

Using a  lt br  gt  for making a new row it s a bad solution from the start  Make your container  div1 to have a width equal to 3 child-divs   lt br  gt  in my opinion should not be used in other places than paragraphs

User · Answer

You need this   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt    lt -- I absolutely don t know why  but go ahead  and add this code snippet to your CSS -- gt          margin 0      padding 0      That s it  have fun removing all those white-spaces problems

User · Answer

HTML       lt div id  div1  gt           lt div gt  lt  div gt  lt div gt  lt  div gt  lt div gt  lt  div gt  lt br  gt  lt div gt  lt  div gt  lt div gt  lt  div gt  lt div gt  lt  div gt   lt  div gt    CSS   div1       width 150px height 100px white-space nowrap      line-height  0px      border blue 1px solid padding 5px     div1 div       width 30px height 30px      border blue 1px solid      display inline-block       display inline zoom 1      margin 0px outline none      DEMO

User · Answer

Although probably not the best method you could add    div1               font-size 0

User · Answer

Add line-height  0px  to your parent div  jsfiddle  http   jsfiddle net majZt

User · Answer

You can remove extra space inside DIv by using below property of CSS in a parent  container  div element display inline-flex Before Adding dislay inline-flex  After Adding display inline-flex  in css

User · Answer

You may use line-height on div1 as below    lt div id  div1  style  line-height 0px   gt       lt div gt  lt  div gt  lt div gt  lt  div gt  lt div gt  lt  div gt  lt br  gt  lt div gt  lt  div gt  lt div gt  lt  div gt  lt div gt  lt  div gt   lt  div gt    See this    http   jsfiddle net wCpU8

[css] Remove "whitespace" between div element

Where This Problem Comes From

Examples related to css

Examples related to html

Examples related to whitespace

Examples related to margin