Home > Article > Web Front-end > An in-depth understanding of CSS margin elements

An in-depth understanding of CSS margin elements

高洛峰Original: 2017-03-15 10:49:181575browse

The previous words

margin is a very special attribute among the box modelseveral attributes. Just to give a few examples: only margin does not display the background of the current element, only margin can be set to a negative value, margin and width and height support auto, and margin has very strange overlapping characteristics. Previous blog posts have introduced the basic knowledge of margin and the detailed usage of negative margin in detail. This article will introduce in detail Margins Several key parts of margin, including overlap, auto and invalid situations

Overlap

[Prerequisite]

Margin overlapping is also called margin merging. There are two prerequisites for this happening.

1. It only occurs on block elements (excluding float, absolute, and inline-block elements )

2. Only occurs in the vertical direction (regardless of writing-mode)

【Classification】

Overlapping margins include the following 3 types Situation

1. Adjacent sibling elements

<style>
p{
    line-height: 2em;
    margin:1em 0;
    background-color: lightblue;
    display:inline-block;
    width: 100%;
}
</style>
<p>兄弟一</p>
<p>兄弟二</p>

2. Parent element and the first or last child element. The margins of the parent and child levels overlap, also called margin. Pass

<style>
.box{
    background-color: pink;
    height:30px;
}
.inner{
    margin-top: 1em;
    background-color: lightblue;
}
</style>
<p class="box">
    <p class="inner">子级</p>
</p>

Conditions

Compared with the margin overlap of adjacent sibling elements, the parent-child margin overlap needs to meet the following conditions (taking margin-top overlap as an example ):

a. The parent element is not a BFC element

b. The parent element does not have a padding-top value

c. The parent element does not have a b order-top value

d. There is no inline element separation between the parent element and the first child element

If it is a parent-child levelmargin-bottom Overlap, item d is changed to no inline element separation between the parent element and the last child element, and the parent element must also meet the restrictions of no height, min-height, max-height

3. Empty block element

<style>
.box{
    background-color: lightgreen;
    overflow: hidden;
}   
.void{
    margin: 1em 0;
}
</style>
</head>
<body>
<p class="box">
    <p class="void"></p>
</p>
一行文字

From the results below, it can be seen that the empty block element should expand the height of the parent margin-top+margin-bottom to a total of 2em, but due to the margin Overlap, only 1em

Similarly, some conditions need to be met for margin overlap of empty block elements

a. The element has no border value

b. The element has no padding value

c. There is no inline element inside

d. There is no height or min-height

【Rule】

Two positive vertical margins, the browser takes the larger value; if both vertical margins are set to negative values, the browser will select the maximum absolute value of the two margins; if a positive margin is combined with a negative margin, the negative margin will be subtracted from the positive margin The absolute value of # In web page layout, because of margin overlap, we often regard margin as a "problem style" and use it as little as possible. But in fact, it plays a big role. Under the premise that the HTML document only uses the default style, if the upper and lower margins do not overlap, the following problems will occur: 1. For continuous paragraphs or lists, if there is no margin overlap, the spacing between the first and last items will appear 1 with other sibling elements: 2, the layout is unnatural; 2. Nesting or directly placing any bare p anywhere in the web will affect the original layout, which is contrary to the web

design principles

; 3. Missing empty Any number of p tags will affect the original reading layout

So, we must make good use of overlap, and we can use margin-top and margin-bottom at the same time in the list items. In this way, the page structure is more robust, and the removal or positioning of the last element will not destroy the original layout

[New attribute]

-webkit-margin- collapse

-webkit-margin-collapse: 9b07564349a7937cfa1ac1f506cd32d0(默认重叠) | 76e6b7d265160750af9791dbc962fcd8(取消) | cc56f414bf6b1ccd7e32d0de9c8d6735(分隔)

This attribute is used to set whether margin overlaps, and acts on one of the two elements where margin overlap occurs. If both use this attribute, one is set to discard and the other is set to separate, the final effect is overlapping collase

auto

only width/height and margin Auto can be set. Detailed information about auto has been introduced in detail in CSS visual formatting. The following only introduces the part about margin:auto

[Why margin:auto cannot achieve vertical centering] The reason why the horizontal direction can be centered is because the width of the block-level element fills the parent element by default , if you set a fixed value for the width and set the left and right margins to auto, you can divide the remaining space equally

The vertical direction cannot be centered because the height of the block-level element defaults to the content height, which is not directly related to the height of the parent element. If the upper and lower margins are set to auto, they will be reset to 0

[WhyPicture cannot be centered horizontally when using margin:auto]

Pictures cannot be centered horizontally, similar to block-level elements that cannot be centered vertically. Because the width of the picture defaults to its own width and is not directly related to the width of the parent element. If the left and right margins are set to auto, they will be reset to 0

. Therefore, if the image is to be centered horizontally, it needs to be set to the display:block element

[Achieve vertical centering]

Use margin:auto achieves vertical centering. There are two methods: 1. Use writing-mode:vertical-lr;

writing-mode represents the page flow direction. The default is horizontal direction. After changing to the vertical direction, vertical centering can be achieved, but the horizontal centering is no longer

2. Change the element to an

absolutely positioned

element (IE7-browser does not support it) After changing the element to an absolutely positioned element, set top:0;bottom:0; so that the absolutely positioned element has a direct relationship with the height of the positioned parent. Then set margin: 0 auto; so that margin-top and margin-bottom equally divide the remaining space to achieve the effect of vertical centering

Invalid situation

1. Inline elements are vertical Margin is invalid

Because the vertical layout of inline elements is mainly affected by line-height and vertical alignment

vertical-align

, vertical margin will not affect them, so it will not affect the vertical layout. In the display mode, the margin area will not display the background of the element, so it will not affect the display of its own elements, so the vertical margin of inline elements is invalid [Note] Do not include inline-block or set writing-mode to vertical -lr situation

2. The margin of some

table

class elements is invalid ``a34de1251f0d9fe1e645927f19a896e8``581cdb59a307ca5d1e365becba940e05``879b49175114808d868f5fe5e24c4e0b``b6c5a531a458a2e790c1fd6421739d1c``b4d429308760b6c2d20d6300079ed38e

Margin cannot be set. For the display attribute, display is a table-related type (excluding table-caption, table, inline-table), and the margin statement is invalid

3. The margin value of the non-positioned direction of the absolutely positioned element seems to be invalid

The margin value of absolute positioning is always valid, but because the absolutely positioned element is out of the document flow and has nothing to do with other element nodes, the effect is not visible

4. Margin caused by BFC Seemingly invalid

The left element uses

float

, and the right element uses overflow-hidden to implement a two-column adaptive layout. The right element's

margin-left The effect can only be seen if the value is large enough. This is because margin-left is relative to the left side of the parent element, not the right side of the image. 5. Invalid margin caused by inline features

When the margin-top of the image reaches a certain value, the image will no longer move upward. This is because the image is an

inline element

, which is affected by the vertical-align alignment property of the inline element. Default baseline alignment. Take the hypothetical uppercase X character on the page as an example.

The above is the detailed content of An in-depth understanding of CSS margin elements. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the border attribute of CSS styleNext article：Detailed explanation of the border attribute of CSS style

See more

An in-depth understanding of CSS margin elements

The previous words

Overlap

1. Inline elements are vertical Margin is invalid

Related articles