Can't add a bottom margin to table-CodePudding

I'm very new to HTML, and got an assignment consisting of a set of instructions and a picture, and the goal is to replicate this picture with HTML.

The problem I have run into now is that I can't seem to add a bottom margin to the table. The instructions says that I'm supposed to add a margin-bottom: 1em; but I can't get it to work.

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>

CodePudding user response：

Since there's no content between the bottom table and the end of the body, this appears to be a case of collapsing margins. Setting overflow: auto; to both the html and body elements appears to restore the behavior that you're after. Large bottom margin applied on the table below for illustrative purposes:

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>

CodePudding user response：

you can use padding-bottom and it will push everything from the bottom.