CSS deep understanding of learning notes-margin and css learning notes-margin

Source: Internet
Author: User

CSS deep understanding of learning notes-margin and css learning notes-margin

1. margin and container size

Element size: ① visible size clientWidth (standard); ② occupying size


Margin and visual size: ① applicable to normal block elements without width/height; ② applicable only to horizontal dimension

Margin and occupy size: ① block/inline-block horizontal elements are applicable; ② it is irrelevant to whether width/height is set; ③ it is applicable to horizontal and vertical directions.It can be used for page up/down white (poor padding compatibility ).

2. margin and percentage Unit

Percentage of common elements: calculated relative to the container width.

Percentage of absolute positioning elements: the width of the container relative to the first located ancestor is calculated.

3. Overlapping margin

Margin overlapping features: ① only occurs on the horizontal element of the block (excluding the float and absolute elements); ② only occurs in the vertical direction without considering the writing-mode.

Margin overlapping situations: ① adjacent sibling elements; ② first/last child element of the parent level; ③ empty block elements



4. calculation rules of overlapping margin

Positive is given as 'distinct'; Positive and Negative values are added; negative is negative.

  Use Cases of margin:



5. Understand margin: auto

Rule: if one side is a fixed value and one side is auto, auto is the size of the remaining space. If both sides are auto, the remaining space is evenly divided.

Writing-mode and vertical center (the modified width of margin: auto center will expire ):


The margin of the absolute positioning element is centered:


6. Locate the negative value of margin

The two ends of the negative value of margin are aligned:


High-level layout under negative margin values:


Adaptive Layout of two columns under negative margin values:


7. Analysis of margin failure

(1) the vertical margin of the inline horizontal element is invalid. premise: ① the element is not replaced, for example, the element is not ; ② the normal writing mode.

(2) margin overlaps

(3) The declared margin such as display: table-cell and margin: display: table-cell/display: table-row is invalid.

(4) position: absolute and margin: the absolute position element does not set the positioning direction of the margin value "invalid". For example, none of the valid margin-top values of img {top: 10%} are valid.

The margin is invalid.

The margin is invalid due to the inline feature of the delimiter:


8. Learn more about attributes such as margin-start and margin-end.

Margin-start: ① normal flow direction. margin-start is equivalent to margin-left, and the two do not overlap. ② If the horizontal flow is from right to left, margin-start is equivalent to margin-right; ③ in vertical streaming (writing-mode: vertical-*;), margin-start is equivalent to margin-top.

Margin-end: ① normal flow direction. margin-end is equivalent to margin-right. The two do not overlap. ② If the horizontal flow is from right to left, margin-end is equivalent to margin-left; ③ in vertical streaming (writing-mode: vertical-*;), margin-end is equivalent to margin-bottom.

Margin-collapse: controls the overlap of margin. Collapse (default-overlapping), discard (cancel, make margin invalid), and separate (separate, no margin overlap ).

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.