Home » Html » How does CSS margin work?

How does CSS margin work?

Posted by: admin November 30, 2017 Leave a comment

Questions:

In the following code, shouldn’t the margin between .box1 and .box2 be 20px as the .box1 has 10px bottom margin and .box2 has 10px top margin.

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

CSS:

.box1{
    margin-bottom: 10px;
}

.box2{
    margin-top: 10px;
}

http://jsfiddle.net/3C7bW/

Answers:

No, the margin will only be 10px between the 2 boxes.

You are saying the same thing twice , “that there must be a margin of 10px below box 1”
and “that there must be a margin of 10px above box2”

Think of it like this :

There are 2 people, Harry and Sally. Harry is standing 10 feet from Sally. How far is Sally away from Harry? Yep, you got it, 10 feet!

Questions:
Answers:

The bottom margin of the first box and the top margin of the second box are considered to be adjoining; therefore, they collapse into one.

Note that this only applies to vertical margins; horizontal margins never collapse no matter the circumstance. If you made the two boxes float such that they line up horizontally, and gave .box1 a right margin and .box2 a left margin, the total space between them would indeed be 20px.

In fact, even if you didn’t line them up horizontally, but floated them and gave them clearance so that .box2 clears .box1, the bottom and top margins would no longer collapse. Both of these cases are mentioned in the spec as well.

Questions:
Answers:

You need to know about margin-collapsing. The following picture describes itself about the margin collapsing.

enter image description here

enter image description here

Questions:
Answers:

Margins are outside of your DOM Element and are for other Margins like transparent so they will overlap eachother.

If you do it with padding it’ll work good because padding is inside the div.

Here a fairly easy explanation of how Margins and Paddings work.

Questions:
Answers:

Read about margin collapsing

This must help you https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing