Why margin-top affects the parent div

Question

Why margin-top affects the parent div

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

Because when I give a margin-top in the child element, does this affect the parent element? See the 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 this that I want? Aligning this box from the inside to the center, I know it has many shapes, but is there any more appropriate?

css margin

asked by anonymous 17.10.2018 / 14:26

2 answers

1

You can do 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>

17.10.2018 / 14:44

Difference between declaration of properties in C # [duplicate] Filters in Vue only work with interpolation, do not work with v-text. Because?

score 3 · Accepted Answer

You're having a problem known as Margin Collapsing or Margin Collapsing . This bug has already been described and is well documented. You can find out more about this in this Mozilla documentation. link

Father and first / last child

* If there is no border , padding , inline , block formatting context created or free to separate margin-top from a block of margin-top from its first block border , content padding , inline , height , or min-height to separate the max-height of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends outside the parent. *

The horizontal side margins will never collapse! See the W3C official documentation link

Horizontal margins never collapse.

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

Readthisquestionandanswer: Why does Edge only move the element Horizontally rather than Vertically?

About practices to solve the problem

There are several ways to solve this problem, but most of them always try to change the type of margin-bottom of the child or the parent. But the tip I give you is to use display so you do not have to worry about overflow: auto; and model-box of elements, which can generate unwanted side effects. This is my tip, there may be people who disagree, but I'd rather not mess with display of elements, nor put display or padding transparent to solve this ...

See your example by applying border to parent

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 overflow:auto link