Let's talk about the margin, he's margin (part 1)

Seeing when newbies misty up page by page, make a lot of mistakes, indenting margins and not fully understanding how this margin actually works, I decided to write this article.

It will definitely be useful for beginner makers, but I doubt it to the professionals, since the person engaged in the layout for more than one year is already obliged to “memorize” all the features of this property.

In this part of the article I will write about the vertical margin. On the horizontal talk in the next part.

To begin with, let us briefly analyze what units of measurement are, what they mean and what margin indents are used for.
')
Cm, mm, inch, pc, pt are absolute units of measurement. It is recommended to use when printing documents.

Px, em, ex,% - relative units, used for monitors.

For a margin, I use px and % , and em - to specify font sizes. Ex (in IE ex = em / 2) - I do not recommend it, because it is interpreted differently in each browser.

And in general, in what unit you would not specify the indent or font size: the browser converts everything into pixels, not taking into account the viewing area.

The viewing area is what the user sees the contents of the site on without scrolling the screen. Each user has it different.

Every coder knows that any element can be represented in the form of 4 areas (margin, border, padding and content).

Margin - external indent. Vertically and horizontally, the construction of margins is different.

As I already wrote above, the sizes for a margin can be put in em, ex, px - hard assignment and in% - are considered relative to some area.

I will give an example of one of the frequent mistakes made by novice typesetters.

There are 2 divas: first and second div.

#first{
padding: 100px;
background: #b5bcbc;
}
#second{
height: 100px;
background: #b06b48;
margin: 30% 0 0;
}

Please note that I have not set a diva for the width property (we will talk about this later). Now we are only interested in margin, which is equal to margin: 30% 0 0;

I hope everyone knows how margin is counted in this case, just in case I remind you what counts clockwise, ie: the indent will be 30% above, 0 to the right, 0 to the bottom and 0 to the left, since I haven’t specified anything , then the margin takes the value of the opposite side, that is, in this case, if the margin on the right is 0, then the margin on the left, if not specified, is also 0.

But now we are interested in margin, which is equal to 30%, it is indented from above. Where does this 30% come from?

Many people think and believe is wrong, that 30% is taken from the top of the entire page.

But this is not true!

Since in this case, div second is embedded in div first, margin-top: 30% will be considered relative to the width of the parent diva second, that is, relative to the width diva first!

In this case, the width of the first diva is the default auto, so the div takes all the free space along the width, and from this width will be calculated 30% margin-top for diva second.

When you reduce the parent diva, and will decrease the indentation from the top of the diva second.

Margin can also be negative. In this case, the element vertically allows you to "call in" on another element or "go bottom" beyond the limits of its container.

For example: two divas lying one above the other.


if we add the first margin-bottom: -100px diva margin-bottom: -100px , and the second margin-top: -50px
#first{
height: 200px;
background: #69c;
margin: 0 0 -100px;
}
#second{
height: 200px;
background: #f60;
margin: -50px 100px 0;
}

then the following will happen.

But ... here comes the big mistake of newbies.

Many people think that since the top div has a margin-bot -100px, and the bottom div, margin-top -50px, then the bottom div will stop at the top one at -150px.

Mistake!

If margins of the same name (both margins are either negative or positive numbers), then a large number is taken in absolute value, and a smaller number is not taken into account.

In this case, the lower div will “call in” on the upper div by 100px, and 50px will not be counted.

The same is true for positive margins, the lower div will “go” from the top by 100px, and 50px will not be taken into account.

Consider the following example.
There are 2 divas, one under the other.

#first{
height: 200px;
background: #69c;
margin: 0 0 -100px;
}
#second{
height: 200px;
background: #f60;
margin: 50px 100px 0;
}

first
second

How do you see the first margin-negative - negative, and the second-top margin - positive, what will happen in this situation?

For opposite margins there will be an addition, that is: -100 + 50 = -50. Accordingly, the lower div go up 50px.

We go further.

Two diva, one nested in the other.

#first{
background: #b5bcbc;
}
#second{
height: 200px;
background: #b06b48;
}

If you add an internal div Margin-top 200px to the CSD,
#second{
height: 200px;
background: #b06b48;
margin-top: 200px;
}


That, here is another mistake! Some believe that the inner margin should “move away” from its parent by 200px downwards and its parent will remain in place, and thereby stretch.

But, as if not so!

If the parent e-ta has no limiting factors (I will write about these factors a little lower), then the margin passes from the inner element to the outer one. Then, according to the old scheme, a margin is selected: if they are of the same name, then a larger one is selected, if unlike, then addition occurs.
And the result

But, what if we don’t need it and we want the div-parent to stay in his place, and the div-child move 200px down?

You can undo this action in relation to the parent, there are several ways.
1. setting the padding to the parent block
2. setting the border to the parent block
3. setting overflow to the parent block, any value except visible (works everywhere except old IE)
And voila

Thank you for your attention, I hope I managed to clarify to beginners what margin is and how to get it right and where.
If the article was useful and there is a desire to read the sequel, then in the next section I will describe the horizontal margins. There things are not as easy as it seems at first glance;)