CSS attribute margin

0. Impact on its own visual width

1>Change the visual width of the block element that is in the standard document flow and has no width value set

In the standard document flow, for a block element that does not have a width set, when it has content or a height is set, its own width is 100% of the width of the parent element. At this time, set the horizontal margin value for the block element. Will change the visual width of the element. But the height cannot be changed, because the height of the block element is fixed or equal to the height of its content and will not stretch.

This feature is useful in bootstrap layout.

<p class="wrap">
  父元素padding: 0 10px;  <p class="yellow">此block元素没有设置margin值</p>
  <p class="red">此block元素设置margin-left:-10px;margin-right:-10px; 拉伸了元素宽度</p></p>

* {margin:0; padding:0;}.wrap {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  padding: 0 10px;
  border: 1px solid #ccc;
}.red {
  height: 100px;
  background-color: red;
  margin: 0 -10px;
}.yellow {
  height: 100px;
  background-color: yellow;  
}

##2>Change width is not set, but is set The visible width and height of the absolutely positioned element that has been positioned (positioning set in pairs, such as top/bottom, left/right)

When the absolutely positioned element does not have width set, but top/bottom, left is set /right value, the element will be stretched. For example, if left:0; right:0; is set, the width of the element is 100% of the width of the first relatively positioned parent element. At this time, the visible width of the element can also be changed through margin. Similarly, for absolutely positioned elements, we can also change its visual height.

<p class="wrap">
  父元素position: relative;  <p class="yellow">绝对定位,并且设置top:0; bottom:0; 垂直拉伸元素，通过设置margin来改变可视高度</p></p>

* {margin:0; padding:0;}.wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}.yellow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  margin: 50px 0;
  background-color: yellow;  
}

##1. Percentage The margin of the value is the same as padding. For elements that are normally in the standard document flow, when the margin value of the element is a percentage value, its actual value is equal to the width of the parent element * percentage;

When an element is set to absolute positioning, its actual value is equal to the width * percentage of the first parent element positioned relative to it

<p class="wrap">
  父元素宽度400px;  <p class="yellow">margin-top:10%; 实际的margin-top=400px*10%=40px</p></p>

* {margin:0; padding:0;}.wrap {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}.yellow {
  width: 200px;
  height: 200px;
  margin-top: 10%;
  background-color: yellow;  
}

2. Margin overlap

Margin overlap usually occurs between sibling elements and between parent and child elements. If you don’t pay attention to it, margin Overlap may often cause us some minor troubles. Here is a summary of the situations where margin overlap occurs.

1>Between sibling elements

When two elements have margin overlap, their actual values ​​are:

When two margin values When both are positive, the actual value = the larger of the two values

1. When the two margin values ​​are one positive and one negative, the actual value = the addition of the two values

2. When both margin values ​​are negative, the actual value = the larger absolute value of the two

3. When will margin overlap occur?

For two adjacent sibling elements, as long as they are block elements in the standard document flow, margin overlap will occur in the vertical direction.

2>Between the parent element and the first/last child element

Set border-top/bottom

1. Set padding-top/bottom

2. Set attributes such as overflow:hidden/auto to implement the auto value of BFC

3. 3.margin

Set margin: 0 auto; for a fixed-width block element to center the element horizontally. This should be commonly used by many people, but few people may know the specific role of the auto value.

To put it simply, for elements that do not have a fixed width or height value set, if they can be automatically stretched, then after a fixed value is set, auto can be used to allocate the remaining space.

It feels a bit confusing. For example, there is a block element with a fixed width. We want it to be displayed on the right side. The most commonly used method is to use the float attribute, but it can also be achieved with margin-left: auto;:

<p class="wrap">
  <p class="red">margin-left: auto;</p></p>

* {margin:0; padding:0;}.wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ccc;
}.red {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-left: auto;
}

Valid scenarios for setting the margin value to auto include :

Ordinary fixed-width block elements, the horizontal direction setting is valid;

1. Absolutely positioned elements, when paired left/right, top are set When /bottom or both are set, fixed width or fixed height is valid;

2. #When the parent element is display: flex;, the child element margin value is auto

3. For more CSS attribute margin related articles, please pay attention to the PHP Chinese website!