Shulou(Shulou.com)06/03 Report--

This article mainly explains "the usage of margin examples of CSS". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "the margin example usage of CSS".

The percentage value of the 1.margin the percentage of the ordinary element maigin is calculated relative to the width (width) of the container element.

Here we set a container with a width of 800 * 600 on the outside of the image. Set img {margin: 10%;}

The results are as follows

As a result, the margin value is 800 * 10% = 80px; therefore, the width of the container is calculated relative to the width of the container. Say it three times.

two。 Percentage maigin value of absolute positioning

Calculated relative to the width value of the ancestor element of the first location. It is the width of parent = 1000px. So margin = 100px

3. You can use margin to achieve 2: 1 adaptation

For example, two containers.

The height of the box is not specified here. Due to setting margin 50%. His height is half that of the parent container, so the aspect ratio is 1: 2.

4. Why do margin overlap

A) two characteristics of margin overlap

It only happens on horizontal elements of block. (excluding float and absolute elements)

Regardless of wirte-mode (that is, writing format), it only occurs in the vertical direction (margin-top margin-bottom).

B) what happened

1 > adjacent sibling elements

2 > the first and last child elements of the parent

3 > empty block.

Example 1 adjacent sibling element

Here are the two sibling elements.

There is only one em and no two em between the two Ps. Because the first margin-bottom and the second margin-top overlap.

In the example, the two parent elements overlap with the last child element

According to conventional theory, the margin-top value of 80px is left between the son and the father of the parent element. But it didn't. The background element of son does not change. No 80px is left.

Here only 80px is set for the parent element

Conditions of margin overlap between father and son

So how do you get rid of margin-top overlap?

As long as it doesn't meet those conditions.

The parent element adds overflow: hidden; border-top padding-top (add a space between them)

The margin overlap of the example three empty block elements.

Notice the empty element with no content in it. Conditions for margin overlap of empty elements

(4) the calculation rules of margin overlap.

A) take a positive large value

B) addition of positive and negative values

C) negative is the most negative.

5. The significance of margin overlap

A) successive paragraphs or lists will appear incongruous if there is no margin overlap ending with 1: 2.

B) nesting or directly placing div anywhere in web will not affect the original layout

C) any number of missing p elements should not affect the typesetting of the original reading

Practical application

When making a list, control the distance of each list

.list {

Margin-top: 15px

Margin-bottom: 15px

}

More robust, even if the last one is removed, it will not affect the layout.

At this point, I believe you have a deeper understanding of the "margin instance usage of CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.