title: CSS and HTML: Remove space between DIVs in given code
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .div-message {
      vertical-align: top;
      width: 1020px;
      text-align: center;
      padding-top: 10px;
      padding-left: 20px;
      padding-right: 20px;
      background: #DCDCDC;
      margin-left: auto ;
      margin-right: auto ;
  }
  
  .msgbox {
      height: 60px;
      width: 100%;
      position: relative;
      box-sizing: border-box;
      padding: 5px 5px 5px 5px;
      font-size: 12px;
      font-weight: normal;
      display: inline-block;
      border-radius: 1px;
      font-family: 'Helvetica', cursive;
      color: black;
      text-decoration: none;
      background-color: white;
      border-bottom: 4px solid #2980B9;
      margin-bottom: 10px;
      border: 2px solid blue;
      outline: 0;
  }
  
  /* tabs support */
  ul.tab {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
       text-align: center;
      padding-top: 1px;
      padding-left: 20px;
      padding-right: 20px;
      background: #DCDCDC;
      margin-left: auto ;
      margin-right: auto ;
      border-bottom:0px;   
      width: 1020px;
  }
  
  ul.tab li {float: left;}
  
  ul.tab li a {
      display: inline-block;
      color: black;
      text-align: center;
      vertical-align: top;
      padding: 10px 10px;
      text-decoration: none;
      font-size: 14px;
      border-bottom:0px;
      text-align: center;
      margin-top:0;
      margin-bottom:0;
  }
  
  ul.tab li a:hover {background-color: #ddd;}
  
  ul.tab li a:focus, .active {background-color: #ccc;}
  
  .tabcontent {
      display: none;
      padding: 10px 10px;
      border: 0px none #ccc;
      border-top: none;
      vertical-align: top;
  
  
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script&gt;
  function openTab(evt, tabName) {
      // Declare all variables
      var i, tabcontent, tablinks;
  
      // Get all elements with class="tabcontent" and hide them
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i &lt; tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }
  
      // Get all elements with class="tablinks" and remove the class "active"
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i &lt; tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
  
      // Show the current tab, and add an "active" class to the link that opened the tab
      document.getElementById(tabName).style.display = "block";
      evt.currentTarget.className += " active";
  }
  &lt;/script&gt;
  &lt;ul class="tab"&gt;
  &lt;li&gt;&lt;a href="#" class="tablinks" onclick="openTab(event, 'Tab1')"&gt;Messages&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="tablinks" onclick="openTab(event, 'Tab2')"&gt;Options&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt; 
  &lt;div id="Tab1" class="tabcontent"&gt;
  &lt;div class='div-message'&gt;
  &lt;textarea name='msgText' id='msgTextId' title='Messages' class='msgbox' readonly&gt;Done!&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It is kind of tabbed panel with two tabs: MESSAGES and OPTIONS. When I click on MESSAGES a message box appears. Menu and message box should appear with grey background. It does appear. But how do I remove white space between menu and DIV, which contains message box?</p>