Detailed explanation of the use of CSS external margins

高洛峰
Release: 2017-03-16 11:06:17
Original
1493 people have browsed it

This article explains in detail the use of css outer margin

h2{margin:10px 0;} p{margin:20px 0;} ......

这是一个标题

这是又一个标题

本例中,第一个h2的margin-bottom(10px),p的margin-top(20px),第二个h2的margin-top(10px)将被合并,它们之间的margin间隙最后是(20px),即取三者之间最大的那个值。
Copy after login
Copy after login


Syntax:

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

##Default value: see Each independentattribute

applies to: all elements excepttableclass 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 toheight, 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的margin-bottom(10px),p的margin-top(20px),第二个h2的margin-top(10px)将被合并,它们之间的margin间隙最后是(20px),即取三者之间最大的那个值。
    Copy after login
    Copy after login


    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!

Related labels:
source:php.cn
Statement of this Website
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
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!