CSS Margin

From the outside merge

Use vertical margin definition block element from the outside when the combined margins may occur.

Block elements adjacent vertical margins of the combined

When two vertically adjacent block elements meet, if the above element has bottom margin margin-bottom, has the following elements from the outer margin-top, the vertical spacing than the margin-bottom margin-top between them the sum, but the larger of the two. This phenomenon is referred to as adjacent block elements combined vertical margins (also referred to collapse margins).

Solution : take care to avoid just fine

Nested block elements of vertical margins merge

For the nested relationship of two block elements, if not the parent element and the upper frame padding, sub-elements and the distance will be on the outside of the outer case of merger from the parent element, outside the combined distance of both relatively big, even if the parent element from the outside to 0, the merger will occur. Occurs only in the vertical direction, the horizontal direction is not affected .

Case:

HTML

<div class="father">
  <div class="son"></div>
</div>

CSS

.father{
  width: 300px;
  height:300px;
  background-color: red;
}
.son{
  width:100px;
  height:100px;
  background-color: blue;
}

If in this case sonis provided on the margins, even the parent element will fathertogether "with partial"

Solution :

• On the border of the parent element can define one pixel or padding

.father{
  width: 300px;
  height:300px;
  background-color: red;
  padding-top: 1px;
  border-top: 1px solid red;

}
.son{
  width:100px;
  height:100px;
  background-color: blue;
}

The disadvantage is to increase the size of the box

• You can add the parent element overflow:hidden