How to use top margin perfectly?

Question

#container {
  width: 350px;
  height: 300px;
  background-color: tomato;
  margin: 20px auto;
}

h1 {
  margin: 10px;
  background-color: blue;
  overflow: auto;
}

<div id="container">
  <h1>Hello</h1>
</div>

The two element should have margin, but there is no any margin. How margin could be placed between them

Answer 1

Set display to table on the container.

#container {
  width: 350px;
  height: 300px;
  background-color: tomato;
  margin: 20px auto;
  display:table;
}

h1 {
  margin: 10px;
  background-color: blue;
  overflow: auto;
}

<div id="container">
  <h1>Hello</h1>
</div>