Why margin-top affects the father div

Question

Because when I give a margin-top on the child element it affects the parent element? See example below:

body{
  background-color: #aaaaaa;
}
.topo{
	width: calc(100% - 20px);
	max-width: 1200px;
	height: 130px;
	display: block;
	margin: 0 auto;
	background-color: #000000;
}
.topo_caixa{
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	display: block;
	margin: 0 auto;
	margin-top: 10px;
	position: relative;
	background-color: #eeeeee;
}

<div class="topo">
<div class="topo_caixa">
</div>
</div>

And what is the best way to do that that I want to do? Align this box from the inside to the center, I know it has numerous forms, but there is one more suitable?

Answer 1

You’re having a problem known as Margin Collapse or Margin Collapsing. This "bug" has already been described and is well documented. You can find out more about this subject in this documentation by Mozilla itself. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/margin_collapsing

Father and first/last child

*If there is no border, padding, part inline, block formatting context created or free to separate the margin-top of a block of margin-top of your first block son, or no border, padding, contents inline, height, min-height, or max-height to separate the margin-bottom of a block of margin-bottom of his last son, then these banks collapse. The collapsed margin ends up outside the father.*

Already the lateral margins, horizontal will never collapse! See what the official documentation of W3C says https://www.w3.org/TR/CSS21/box.html#Collapsing-margins

Horizontal margins Never Collapse.

Look at this example, notice that the margin only pushes sideways when the element is inline and in the block elements pushes tb to the side and vertically. See that the horizontal margin does not collapse it adds the margin of the element to the side.

Read this question and the answer: Why the Edge only moves the element Horizontally and Not Vertically?

---

About the practices to solve the problem

There are several ways to solve this problem, but most of them always try to change the type of the display son or father. But the tip I give you is to use the overflow: auto; so you don’t have to worry about the model-box and display of the elements, which can generate unwanted side effects. That’s my tip, there may be people who disagree, but I prefer not to mess with the display of the elements, nor put padding or border transparent to solve this...

See your example applying the overflow:auto in the father

body{
  background-color: #aaaaaa;
}
.topo{
  width: calc(100% - 20px);
  max-width: 1200px;
  height: 130px;
  display: block;
  margin: 0 auto;
  background-color: #000000;
  overflow: auto;
}
.topo_caixa{
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  display: block;
  margin: 0 auto;
  margin-top: 10px;
  position: relative;
  background-color: #eeeeee;
}

<div class="topo">
  <div class="topo_caixa">
  </div>
</div>

Interesting article on margin collapse https://css-tricks.com/what-you-should-know-about-collapsing-margins/

Answer 2

You can do it like this:

body{
  background-color: #aaaaaa;
}
.topo{
  width: 100%;
  height: 200px;
  display: flex;
  background-color: #000;
}
.topo_caixa{
  margin: auto;
  text-align:center;
  background-color: #c0c0c0;
  width: 90%;
  height: 90%;
}

<div class="topo">
<div class="topo_caixa">

</div>
</div>