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 · Answer

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

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

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

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

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    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 0 Transitional  EN  gt    to    lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 0 Strict  EN  gt    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

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

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

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

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

[css] Remove "whitespace" between div element

Examples related to css

Examples related to html

Examples related to whitespace

Examples related to margin