html - 删除表格顶部的额外间距

Question

我正在使用 div 和表格创建布局。

<div class="main-container bg-white">
  <div class="main-content-container bg-blue">
    <div class="logo-container">
      <img src="http://thebrainfever.com/images/apple-logos/Silhouette.png" width="100px" height="100px"/>
    </div>
    <div class="menu-container">
      <a href="#">Menu 1</a> | <a href="#">Menu 2</a>
    </div>
  </div>
</div>
<div class="main-container bg-white">
  <div class="main-content-container bg-yellow">
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="wrapper">
      <tr>
        <td style="width: 100%; padding: 0px 5px; background-color: grey;" colspan="2">
          Content
        </td>
      </tr>
    </table>
  </div>
</div>

https://jsfiddle.net/odtkrumL/

布局看起来不错，除了表格顶部有额外的间距，这样文本“内容”被向下推了一点(黄色间距)。我怎样才能删除额外的(黄色)间距？

Answer 1

作为快速修复，将 display:block 添加到您的 .wrapper

.wrapper {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

fiddle :https://jsfiddle.net/qr7byupa/