删除 table 顶部的额外间距

Question

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

<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/

布局看起来不错，只是 table 顶部有额外的间距，这样文本 "Content" 被向下推了一点（黄色间距）。我怎样才能删除多余的（黄色）间距？

Answer 1

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

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

Fiddle : https://jsfiddle.net/qr7byupa/

Answer 2

请试试这个：

   .bg-white {
    background-color: #ffffff;
    display:flex
    }

删除 table 顶部的额外间距

Removing extra spacing on top of a table

html

css

html-table

css-float