preface

Thank you

This article is summarized in teacher Zhang Xinxu’s CSS in-depth understanding of margin course, thanks to teacher Zhang’s hard work!

Difficult to learn CSS

As a front-end dog, we have to deal with the web page every day. CSS knowledge is especially important when the UI sends you the design. CSS, on the other hand, is a symbolic language that sometimes gives me a headache: it is illogical and full of unwritten rules, so that every time I do a project, I spend most of my time and energy adjusting the layout and style. The question, said my heart 🙁

But who call we are to eat this bowl of rice, anyway, there are difficulties must be solved head on, learn CSS, look up to Teacher Zhang!

The body of the

Margin is an attribute of strong character. Next, I will explain the horror of margin from various aspects.

Element size influences

Generally, the dimensions of an element can be divided into visual dimensions and occupying dimensions

  1. Viewsize – clientWidth (border-padding-size)
  2. OuterWidth (border-margin)

How does margin affect these two sizes?

First of all, both dimensions need to meet certain conditions.

The effect condition of visual size

  1. Applies to block-level elements that have no width/height set. This excludes float absolute fixed elements, inline levels, and table-cell elements
  2. Applicable to horizontal dimensions only (margin-left/margin-right)

Influence conditions of occupancy size

  1. Applies to block/inline-block horizontal elements
  2. Suitable for any direction
  3. Independent of width/height
  4. Inline elements affect only horizontal directions (mentioned later)

Affect the sample

  1. Margin affects the visible horizontal size of an element

    See the visual size of the Pen margin by Simon Ma (@Tomotoes) on CodePen.

  2. Margin affects the size of the occupation. This is a basic skill of margin.

Percentage unit

Generally speaking, of all margin units, percentage units are the most confusing.

  1. The percentage margin of a normal element is calculated relative to the width of the container
<style>
  #parent {
  margin: 20px 400px;
  width: 100px;
  height: 200px;
}
#child {
  Margin: 5% * width of parent element 10% * width of parent element; * /
  margin: 5% 10%;
  /* Width of parent element * 50% */
  width: 50%; 
  /* Height of the parent element * 50% */
  height: 50%;
}
</style>
<div id="parent">
  <div id="child"></div>
</div>
Copy the code
  1. The absolute positioning percentage margin is calculated relative to the width of the first ancestor element that has the positioning attribute (relative/absolute/fixed).
<style>
  #parent {
  width: 100px;
}
#child {
  /* Note that absolute positioning has been added to the child element, so the percentage is calculated by the width of the positioning attribute's ancestor element, in this case the browser viewport */
  position:absolute; 
  Margin: 5% * width of parent element 10% * width of parent element; * /
  margin: 5% 10%;
}
</style>
<div id="parent">
  <div id="child"></div>
</div>
Copy the code

Overlap,

Overlap is the most important unspoken rule in margin.

In scene

  1. A neighboring sibling element
  2. Parent and first/last child element
  3. Empty block-level elements (self and self)

Overlapping conditions

  1. Block-level elements (excluding float and Absolute elements)
  2. Does not consider writing-mode, only happens in vertical direction (margin-top/margin-bottom)
  3. Parent-child overlap condition

  • Margin – top overlap

    1. The parent element unformatted context element does not set overflow:hidden
    2. The parent element has no border-top setting
    3. The parent element has no padding-top setting
    4. There is no inline element split between the parent and the first child

  • Margin – bottom overlap

    1. The parent element unformatted context element does not set overflow:hidden
    2. The parent element has no border-bottom setting
    3. The parent element has no padding-bottom setting
    4. There is no inline element split between the parent and the first child
    5. The parent element has no height, min-height, or max-height restrictions
  1. Margin overlap condition for an empty block-level element
    1. Element does not have a border set
    2. The element has no padding setting
    3. There are no inline elements
    4. There’s no height, or min-height

Calculation rules

  1. Positive takes a large value
<style>
#top{
  margin-top:30px;
}
#bottom{
  margin-bottom:20px;
}
</style>
<div id="bottom"></div>
<div id="top"></div>The vertical distance between the two elements is: #top The margin-top value of the elementCopy the code
  1. Plus and minus
<style>
 #top{
  margin-top: -30px;
}
#bottom{
  margin-bottom:20px;
}
</style>
<div id="bottom"></div>
<div id="top"></div>The vertical distance between the two elements is: margin-top of the #top element plus margin-bottom of the #bottom elementCopy the code
  1. Minus minus is the most negative
<style>
#top{
  margin-top: -30px;
}
#bottom{
  margin-bottom: -20px;
}
</style>
<div id="bottom"></div>
<div id="top"></div>The vertical distance between the two elements is: #top The margin-top value of the elementCopy the code
  1. When the parent overlaps with the first/last child element, setting a vertical margin for the child element is equivalent to setting the same vertical margin attribute for the parent element. In other words, when the parent element overlaps with the first/last child element, they share the same margin attribute

Overlapping meaning

  • Continuous paragraphs or lists, for example, will look awkward without margin overlap.
  • Nesting or placing empty divs anywhere on the page will not affect the original layout.
  • Any number of p elements left blank will not affect the original reading layout.

margin auto

When you use Margin Auto, you should think of one word: padding

A block-level element with no width is automatically filled in

If one side is constant and one side is Auto, auto is the size of the remaining space

If both sides are auto, then the remaining space is equally divided

The following is an example:

<style>
#demo{
  width: 500px;
  margin-right:100px;
  /* margin-left: 100vw - margin-right - width*/
  margin-left:auto;
}
</style>
<div id="demo"></div>
Copy the code

margin:auto 0 ! == vertically centered

Margin: 0 auto margin: 0 auto

Margin: Auto 0 is not vertically centered.

A: A block-level element will automatically fill the available horizontal dimensions, but not the vertical dimensions, because it doesn’t have any available vertical space at all. Margin: 0 auto margin: 0 auto Margin: Auto 0 doesn’t have any size to fill in.

Failure case

Margin: 0 auto cannot be centered when the child element is larger than the parent element because there is no space left to fill it. Margin is already negative when the child element is larger than the parent element.

Vertical center

  1. Writing -mode is centered with vertical
<style>
.father{
  writing-mode: vertical-lr;/* Change the direction of the flow to vertical */
}
.son{
  margin: auto;
}
</style>
<div class="father">
  <div class="son"></div>
</div>
Copy the code
  1. Absolute location element
<style>
.parent{
  position: relative;
}
.child{
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin:auto;
}
</style>
<div class="parent">
  <div class="child"></div>
</div>
Copy the code

Failure scenario

  1. Invalid vertical margins for inline horizontal elements (margin-top/margin-bottom)
  2. Margin overlap occurs
  3. Margins for absolute positioning elements are “invalid” because absolute positioning elements are isolated from the flow of the document and have no relation to neighboring elements, so it is not possible to set margins and push away other elements like normal elements
  4. Margin is out of reach because there are elements that corrupt the flow of the document, and float absolute is set to create an illusion that Margin does not use these elements as criteria
  5. Display :table-cell/display:table-row margin declared invalid! Some replacement elements are excluded, depending on how each browser implements them. For example, the button element is declared display:table-cell,but in Chrome, the button’s display property is inline-block.
  6. Margin-top: negative infinity, however, is invalid as small as 1em. Since it is an inline element, the default is to align the base line with the bottom edge of the x letter, no matter how large the margin value is, it doesn’t matter. The following is an example:

    Simon Ma (@Tomotoes) on CodePen

Other attributes

  1. margin-start
  • In normal flow, margin-start equals margin-left, and the two overlap and do not add
  • If the horizontal flow is from right to left, margin-start equals margin-right
  • (writing-mode:vertical-*;) Margin-start is the same as margin-top

  1. Margin-end is the opposite of margin-start

  2. Margin-before by default is the same as margin-top

  3. Margin-after by default is the same as margin-bottom

  4. margin-collapse

  • margin-collapse:collapse;

    (Default) Overlap occurs

  • margin-collapse:discard;

    Cancel overlap, margin overlap part is 0, no margin

  • margin-collapse:separate;

    There is no overlap, and the overlapped part is margin-top + margin-bottom

conclusion

This is the end of the margin course. Thanks again for zhang Xinxu’s hard work!

Deep into the Web stack of technologies, adhere to the original, although the update of the article is uncertain, but only for the quality of life, if you like this article, welcome to support attention.