The margin property in CSS

I have always thought that the margin property is a very simple property, but recently I have encountered some problems in the project, only to find that the margin property has some "pits", I will introduce the basic knowledge of margin and the "pit". This blog post is mainly divided into the following sections:

• margin--Basic Knowledge

• margin--applies between sibling elements (not parent-child relationships)

• margin--applied between parent and child elements (emphasis)

• Several cases when the unit of the Margin--margin value is%

Part I: basic knowledge of margin--

To introduce the basics of margin, we can't avoid talking about CSS box models, which are generally used to design and layout CSS box models. It is essentially a box that includes margin (margin), border (border), padding (padding), and the most intermediate content. That is the box model (here we talk only about the standard box model of the IE5 and the non-standard box model used by the IE6 in the weird mode):

We want to introduce the margin at the outermost level, because margin (margin) must be transparent, so it can be used to make a certain gap between the different boxes to achieve a beautiful layout and other effects. From the box model above we can see that the margin exists in four weeks, we can use Margin-top, Margin-right, Margin-bottom, margin-left respectively set the margin value of these four directions. (Note: Because this part of the knowledge is more basic, so I no longer in this section do not do more introduction)

Part II: margin--between sibling elements (not parent-child relationships)

This section mainly introduces the merging of horizontal and vertical margins.

(1) Horizontal margin merging

Two horizontal boxes meet, then the distance between them is the sum of the margin between the right margin of the left box and the right box.

Example 1:

The code is as follows:

<! DOCTYPE html>

The effect is as follows:


At this point the distance between the two is exactly 100px.

Note: as you can see, in order to get two P (block elements) out of the normal flow of the document I used the Display:inline-block property, in addition, I also set the body font-size to 0, This can solve the problem of inline-block itself, otherwise the two P example will be greater than 100px. Of course, using float also allows two p to appear on the same line.

(2) Vertical outer margin merging

When two vertical boxes meet, the vertical distance is equal to the lower margin of the upper box and the larger one in the upper margin of the lower box.

Example 2:


<! DOCTYPE html>

The effect is as follows:



At this point we can observe the naked eye, the two vertical direction of the example is about 100px (actually 100px) rather than 100+50=150px, this is precisely because two vertical boxes meet, its vertical distance is equal to the upper box bottom margin and the lower box of the upper margin of the larger one.

Another interesting example is the assumption that if an element has both margin-top and Margin-bottom, but the content is empty, then the two margin values will also be superimposed, with the value being the largest of the two, which resembles the overlay of the margin value of two boxes in the vertical direction. The code is as follows:


<! DOCTYPE html>

The final effect is as follows:



We found that the example in the above P and p below is not 100+50=150px, but the largest of the two, that is, 100px.

So why does the creation of such a standard without setting the same standard as the horizontal direction? That is, the margin value of the superposition, in fact, there is a certain truth. For example, we need to design a page consisting of several paragraphs. We need to set margin-top and Margin-bottom so that the first paragraph and the top of the page have a distance, so that the last section and the bottom have a distance. The following are not superimposed and superimposed:


We can see that the left side of the page does not overlap, then the two paragraphs between the example is the top twice times the spacing, and the right side of the page overlap, then all the spacing is equal. Perhaps this is the purpose of setting standards, who knows?

Part III: margin--application between parent and child elements (emphasis)

The second section describes the use of margin between sibling elements, and this section will describe the most interesting application of margin between the parent and child elements. This part, we also discuss from two aspects. On the one hand, the child element sets the margin value in the horizontal direction, and the child element sets the margin value in the vertical direction.

(1) Set the margin value in the horizontal direction in the child element

We can set Margin-left to control the example between the left border of the child element and the left border of the parent element.

Example 3:


<! DOCTYPE html>

I set the margin-left of the child element to 100px, and the effect is as follows:


That is, the distance between the left border of the child element and the left border of the parent element is 100px. Unlike setting a margin between sibling elements, the margin between sibling elements does not take into account padding, but when the parent and child elements are different, what will the effect be if there is padding in the parent element? Take a look at the following example:

Example 4:

Let's add the padding value to the parent element based on the example above.


<! DOCTYPE html>

The above code adds a 100px padding value to the parent element, with the following effect:


We can see that the child element is above the distance of 100px, because the child element must be in the content portion of the parent element, which is no doubt.

However, after measurement you can find that the left border of the child element is 200px from the left border of the parent element, because there is also a 100px left padding value, the previous example because I did not set the padding value, so did not observe, So that means setting margin-left in the child element whose value is actually the distance from the left padding of the parent element to the left border of the child element.

The use of example 5:margin-right is similar to the use of margin-left, and I'll just cite one example here.

This example sets the Margin-right value in the child element, as follows:


<! DOCTYPE html>

This example differs from Example 4 only in the position of the child element. The effect is as follows:


This example shows that the value of margin-right is the distance between the right border of the child element and the padding inside of the parent element. Just a few of the previous examples I didn't use padding, so I couldn't see it.

(2) Set the margin value in the vertical direction in the child element

In the previous experience, in theory, we can also set the value of margin-top to leave a certain distance between the top border of the child element and the inner padding of the parent element. Then let's try it!

Example 6:


<! DOCTYPE html>

This example I set the Margin-top to 100px, the effect is as follows:


This is not the effect we want, we want the upper part of the child element to be 100px above the parent element, but what we see is that the top of the parent element is 100px away from the top of the browser page. Where does the problem arise?

This is actually because when the parent element has not set the padding value and the border value, there is a bug--parent element that is completely coincident with the child element above and cannot be separated. That's why the parent and child elements are all down in the same situation.

There are several ways to solve this problem:


       

 
        
 
         
Method One: Add a Padding-top value to the parent element
 
         
Method Two: Add a border value to the parent element
 
         
Method Three: Add attribute Overflow:hidden to parent element;
 
         
Method Four: Declare floating float for parent element or child element
 
         
Method Five: Make the parent element or child element declared absolute: Position:absolute;
 
         
Method Six: Add attribute Overflow:auto to parent element; positon:relative; (Note: This method for subsequent additions, thank Bo Friends @ Elf Pawn provide this method)
 
        

       
Method One: Based on Example 6, add the padding-top:1px in the parent element's CSS code, the effect is as follows:


The only disadvantage of the method is to increase the error of 1px.

Method Two: Based on Example 6, add the border-top:1px solid transparent in the parent element's CSS code, the effect is as follows:


Likewise achieves the effect, the disadvantage with the method one.

Method Three: Based on example 6, add the Overflow:hidden in the parent element's CSS code, the effect is as follows:


Also achieves the effect, and there is no error in existence. Perfect!!!!

Method Four: Declare the parent element or child element float; Based on example 6, add float:left to the child element CSS code, or add Float:left to the parent element's CSS code, and the same picture is not shown here.

Pros: No pixel error. Disadvantage: float is sometimes unnecessary.

Method Five: Add Position:absolute to the parent element or child element; Effect is also achieved.

Pros: Same method four. And as long as we don't use top and left there's no effect, so it's also a good idea.

Method Six: Add Overflow:auto to the parent element, and position:relative to achieve the same effect.

Part IV: Several cases when the margin value is in%

I used margin when I gave the example, and its value is in PX, which is not a problem to understand. But what if the margin value is in%? In fact, this percentage (%) is relative to the element's parent element (container), which is true for sibling and parent-child elements. (Thanks again for the advice of bo friends @ Pokemon Pawn!!) This is supplemented by this recommendation) but unexpected results occur when using a vertical margin in a sibling element, as illustrated below.

(1) The sibling element uses a margin with a value of% in the horizontal direction

Example 7:




In this example, set two elements to float to the left to make it easier to observe the horizontal margin of the two. The left P has no margin, the margin-left of P on the right is 20%, the effect is as follows:


You can see that the spacing between two P is always the parent element (the parent of P on the right is the body, and its width is 20% of the width of the browser).

(2) The sibling element uses a margin with a value of% in the vertical direction

Inspired by example 7, we can guess that if margin is used vertically and the value is in%, then the distance between the two will be the percentage of the parent element (the body in the example above). So is this really the case? Look at the following example.

Example 8




This sets the p without margin above, and the margin-top of P below is 10. The effect is as follows:


We found that when I narrowed the height of the browser, the spacing in the vertical direction did not shrink!!! And when I narrow the width of the browser, the distance in the vertical direction is reduced!!!

This means that a margin is used in the vertical direction between statistical elements, when the unit of the value is%, which is relative to the width of the parent element.

So why is this not the height of the browser as we would like it to be? It is explained by the great God:


(3) The parent-child element uses a margin with a value of%

For a parent-child element, if the unit is%margin in the child element, the margin value is relative to the width and height of the parent element (Note: This is indeed the height relative to the parent element!). Of

Example 9

The code is as follows:


<! DOCTYPE html>

In this example, I set the value of Margin-left to a value of 20%,margin-top of 20%, the width of the parent element is 500px, and the parent element has a height of 300px. Let's look at the effect below.


You can see that the margin-top value of the child element is ultimately relative to the width of the parent element, not the height.

Summarize:

This blog post only covers some of the points of margin, but it would be nice to have a little bit of a gain if you read it. Due to my summary of haste, lack of knowledge, mistakes are unavoidable, I hope that if you find inappropriate at the beginning to express their views, I will be very grateful.

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.