Detailed explanation of the use of CSS external margins

This article explains in detail the use of css outer margin

h2{margin:10px 0;}
p{margin:20px 0;}
......<h2 id="这是一个标题">这是一个标题</h2><p>
    <h2 id="这是又一个标题">这是又一个标题</h2></p>本例中，第一个h2的margin-bottom（10px），p的margin-top（20px），第二个h2的margin-top（10px）将被合并，它们之间的margin间隙最后是（20px），即取三者之间最大的那个值。

Syntax:

margin: [ | auto ]{1,4} | inherit

##Default value: see Each independent attribute

applies to : all elements except table class elements of table | inline-table | table-caption

InheritanceSex: None

AnimationSex:Yes

Calculated value: Look at each independent attribute

Related attributes: [ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left]

Value:

• auto: horizontal (default) In writing mode, the calculated value of margin-top/margin-bottom is 0, and margin-left/margin-right depends on the available space. For details, see: margin series keyword auto

##: Use length value to define external padding. Can be negative
: Use percentage to define outer padding. In horizontal (default) writing mode, refer to its containing block
• width

  for calculation. In other cases, refer to height, which can be negative

Description:

Retrieve or set the extended margins of the

object's four sides.

If all four parameter values ​​are provided, the four sides will be applied in the order of upper, right, lower, and left.
If only one is provided, it will be used for all four sides.
If two are provided, the first one is used for up and down, and the second one is used for left and right.
If three are provided, the first is for top, the second is for left and right, and the third is for bottom.
Non-Replaced inline elements can use this attribute to set the outer patches on the left and right sides; if you want to set the outer patches on the top and bottom sides, you must first make the object Appears as block level or inline block level.
Extended margins are always transparent.
• Some adjacent margins will merge, which we call margin folding:

  h2{margin:10px 0;}
  p{margin:20px 0;}
  ......<h2 id="这是一个标题">这是一个标题</h2><p>
      <h2 id="这是又一个标题">这是又一个标题</h2></p>本例中，第一个h2的margin-bottom（10px），p的margin-top（20px），第二个h2的margin-top（10px）将被合并，它们之间的margin间隙最后是（20px），即取三者之间最大的那个值。

The parent element and the first/last child element will merge margin

The above is the detailed content of Detailed explanation of the use of CSS external margins. For more information, please follow other related articles on the PHP Chinese website!