This is the 7th day of my participation in Gwen Challenge

1.1 Margin attribute

Margin azimuth attribute

The property name Attribute values describe The instance
margin-top Positive px. Sets the width of the upper margin margin-top: 1px;
margin-right Positive px. Sets the width of the right margin margin-right: 1px;
margin-bottom Positive px. Set the width of the margin margin-bottom: 1px;
margin-left Positive px. Sets the width of the left margin margin-left: 1px;
margin One to four positive numbers px Set the width of the four margins margin: 1px 3px;

Margin attribute values

marginAttribute values describe The instance
5px When the property value is 1 parameter, set all four margins of the box to 5 pixels margin: 5px;
5px 10px When the property value is 2 parameters, set the upper and lower margins of the box to 5 pixels and the left and right margins to 10 pixels margin: 5px 10px;
5px 10px 15px When the property value is 3 parameters, set the top margin of the box to 5 pixels, the left and right margins to 10 pixels, and the bottom margin to 15 pixels margin: 5px 10px 15px;
5px 10px 15px 20px When the property value is 4 parameters, set the top margin of the box to 5 pixels, the right margin to 10 pixels, the bottom margin to 15 pixels, and the left margin to 20 pixels margin: 5px 10px 15px 20px;

1.2 Margins To achieve horizontal center of the box

Two conditions need to be met:

  1. Boxes must be block elements.
  2. The box must be setwidth 。

The style code is:

.block_center {
    width: 800px;
    margin: 0 auto;
}
Copy the code

1.3 Upper and lower margins merge

1.3.1 Merging the margins of adjacent block elements

When there are two adjacent block elements, if the upper block element has a lower margin margin-bottom and the lower block element has a higher margin margin-top, then the upper and lower spacing between the two block elements is not the sum of margin-bottom and margin-top. It’s the larger of the two. This phenomenon is called merging margins above and below adjacent block elements (also known as margin collapse).

Solutions:

Set margin-bottom or margin-top directly to a block element. Avoid both upper and lower margins for block elements.

1.3.2 Merge the upper and lower margins of nested block elements

When there are two nested block elements, if the parent element does not have top padding and top border border-top, the upper margin of the parent element and the upper margin of the child element will be merged, which is shown as the pixel distance of the parent element and child element with the larger margin will be moved down at the same time. Parent element top margin merge occurs even if the parent element’s top margin is 0.

Solutions:

  1. Set a 1 pixel top border on the parent elementborder-top-width: 1px;Or set the upper inner marginpadding-top: 1px; 。
  2. Add to the parent elementoverflow: hidden;Properties.

If you feel this article is good, can you give me a thumbs up (· ε · ●)

If there is any mistake, please leave a message, we will correct it in time