An in-depth understanding of CSS margin elements

The previous words

marginis a very special attribute among thebox modelseveralattributes. 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 detailMarginsSeveral 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 (excludingfloat, absolute, and inline-block elements )

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

【Classification】

Overlapping margins include the following 3 types Situation

1. Adjacent sibling elements

 
兄弟一
 
兄弟二

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

 
 
子级
 

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 apadding-topvalue

c. The parent element does not have a border-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-bottomOverlap, 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

 
  
 
 
 一行文字

 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

; 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: (默认重叠) | (取消) | (分隔)

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

[WhyPicturecannot 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

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 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

class elements is invalid``````````

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

float

margin-leftThe 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

inline element

#

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!