无法在表格中添加下边距

Question

我对 HTML 很陌生，得到了一个由一组指令和一张图片组成的作业，目标是用 HTML 复制这张图片。

我现在遇到的问题是我似乎无法在表格中添加底部边距。 说明说我应该添加一个 margin-bottom: 1em;但我无法让它工作。

html {
  background-color: maroon;
}

body {
  background-color: white;
  width: 650px;
  margin-top: 30px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3em;
  padding: 0.2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 3em;
  margin-right: 3em;
  background-color: black;
  color: orange;
  text-align: center;
}

table {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 2em;
  text-align: center;
  border: 10px solid navy;
  /* margin-bottom goes here?*/
}

thead {
  background-color: #00bbbb;
  color: #0000aa;
  font-size: 1.25em;
  font-style: italic;
}

caption {
  font-size: 2em;
  font-weight: bold;
  color: white;
  background-color: #008080;
  padding: 0.5em;
  text-shadow: 1px 1px 8px black;
}


/* ändra värde på raderna nedan för att ändra bredd på motsvarande (n) kolumn */

td:nth-of-type(1) {
  width: 19%;
}

td:nth-of-type(2) {
  width: 23%;
}

td:nth-of-type(3) {
  width: 27%;
}

td:nth-of-type(4) {
  width: 31%;
}


/* ändra ingenting under denna raden! */

tbody:last-of-type td {
  border: 3px dotted navy;
  background-color: #ffff99;
  padding: 0.4em;
}

tfoot:last-of-type th {
  font-weight: bold;
  border: 5px dotted red;
  background-color: #9999ff;
  padding: 0.4em;
}

<h1>Tabell</h1>
<table>
  <caption>Cellräkning</caption>
  <thead>
    <tr>
      <th>Kol 1</th>
      <th>Kol 2</th>
      <th>Kol 3</th>
      <th>Kol 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
    <tr>
      <td>Cell 9</td>
      <td>Cell 10</td>
      <td>Cell 11</td>
      <td>Cell 12</td>
    </tr>
    <tr>
      <td>Cell 13</td>
      <td>Cell 14</td>
      <td>Cell 15</td>
      <td>Cell 16</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Totalt: 28</th>
      <th>Totalt: 32</th>
      <th>Totalt: 36</th>
      <th>Totalt: 40</th>
    </tr>
  </tfoot>
</table>

Answer 1

由于底部表格和正文末尾之间没有内容，这似乎是collapsing margins 的情况。将overflow: auto; 设置为html 和body 元素似乎可以恢复您所追求的行为。为便于说明，下表应用了较大的底部边距：

html {
  background-color: maroon;
}

body {
  background-color: white;
  width: 650px;
  margin-top: 30px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

html,
body {
  overflow: auto;
}

h1 {
  font-size: 3em;
  padding: 0.2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 3em;
  margin-right: 3em;
  background-color: black;
  color: orange;
  text-align: center;
}

table {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 2em;
  text-align: center;
  border: 10px solid navy;
  margin-bottom: 10em;
}

thead {
  background-color: #00bbbb;
  color: #0000aa;
  font-size: 1.25em;
  font-style: italic;
}

caption {
  font-size: 2em;
  font-weight: bold;
  color: white;
  background-color: #008080;
  padding: 0.5em;
  text-shadow: 1px 1px 8px black;
}


/* ändra värde på raderna nedan för att ändra bredd på motsvarande (n) kolumn */

td:nth-of-type(1) {
  width: 19%;
}

td:nth-of-type(2) {
  width: 23%;
}

td:nth-of-type(3) {
  width: 27%;
}

td:nth-of-type(4) {
  width: 31%;
}


/* ändra ingenting under denna raden! */

tbody:last-of-type td {
  border: 3px dotted navy;
  background-color: #ffff99;
  padding: 0.4em;
}

tfoot:last-of-type th {
  font-weight: bold;
  border: 5px dotted red;
  background-color: #9999ff;
  padding: 0.4em;
}

<h1>Tabell</h1>
<table>
  <caption>Cellräkning</caption>
  <thead>
    <tr>
      <th>Kol 1</th>
      <th>Kol 2</th>
      <th>Kol 3</th>
      <th>Kol 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
    <tr>
      <td>Cell 9</td>
      <td>Cell 10</td>
      <td>Cell 11</td>
      <td>Cell 12</td>
    </tr>
    <tr>
      <td>Cell 13</td>
      <td>Cell 14</td>
      <td>Cell 15</td>
      <td>Cell 16</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Totalt: 28</th>
      <th>Totalt: 32</th>
      <th>Totalt: 36</th>
      <th>Totalt: 40</th>
    </tr>
  </tfoot>
</table>

Answer 2

您可以使用 padding-bottom，它会从底部推动所有内容。