title: Remove "whitespace" between div element
body: <p>This is my HTML code</p>
  <pre><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;
  </code></pre>
  <p>My CSS:</p>
  <pre><code>#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;
  }
  </code></pre>
  <p>If I insert the <code>&lt;!DOCTYPE html&gt;</code> before the <code>&lt;html&gt;</code> tag, the page will look like this:</p>
  <p><img src="https://i.stack.imgur.com/q0bZ0.png" alt="enter image description here" /></p>
  <p>But if I remove the <code>&lt;!DOCTYPE html&gt;</code> tag, the 'whitespace' between the two lines will be remove
  <img src="https://i.stack.imgur.com/yAUeR.png" alt="enter image description here" /></p>
  <p>But I'd like to use <code>&lt;!DOCTYPE html&gt;</code> 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 ...)</p>