Margin of CSS Properties

0. Effect on the visible width of the individual

1> change the visual width of a block element that is not set to a width value in the standard document stream

In a standard document flow, for a block element that does not have a width set, when it has content or sets a height, its width is 100% of the width of the parent element, which sets the horizontal margin value for the block element, which changes the visual width of the element. However, the height cannot be changed because the height of the block element is fixed or equal to the height of its content and does not stretch.

This feature is useful in the layout of bootstrap.

<p class= "Wrap" >  parent element padding:0 10px;  <p class= "Yellow" > This block element does not set margin value </p>  <p class= "Red" > This block element setting margin-left:-10px; margin-right:-10px; Stretch the element width </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> changes not set width, but sets the visual width of the absolute positioning element for positioning (positioning of the set, such as: Top/bottom,left/right)

When an absolutely positioned element does not have width set, but the Top/bottom,left/right value is set, the element is stretched. such as setting left:0; right:0; The width of the element is 100% of the width of the first relative positioned parent element, which can also be changed by margin to change the visual width of the element. Similarly, for an absolutely positioned element, we can also change its visual height.

<p class= "Wrap" >  parent element position:relative;  <p class= "Yellow" > Absolute positioning, and set top:0; bottom:0; Extrude elements vertically to change the visual height by setting 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. Margin of percent value

As with padding, for elements that are normal in the standard document flow, when the margin value of an element is a percent value, its actual value is equal to the width of the parent element * percentage;

When an element is set absolutely positioned, its actual value equals the width of the first parent element relative to its position * percent

<p class= "Wrap" >  parent element width 400px;  <p class= "Yellow" >margin-top:10%; The actual 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 the parent and child elements, if we do not pay attention, margin overlap may often bring us some small trouble, here is the occurrence of margin overlapping situation summed up.

Between the 1> brothers elements

When a margin overlap occurs for two elements, the actual value of the case is:

1. When two margin values are positive, the actual value = Two of the larger value

2. When two margin values are a positive and negative, the actual value = two values are added

3. When two margin values are negative, the actual value = two in the absolute size of the

When will the margin overlap occur?

For two adjacent sibling elements, margin overlap occurs vertically as long as the block element is in the standard document stream.

2> between a parent element and the first/last child element

1. Set Border-top/bottom

2. Set Padding-top/bottom

3. Set properties such as Overflow:hidden/auto to implement BFC

Auto value of 3.margin

Setting margin:0 Auto for a fixed-width block element, which should be used frequently by many people, can be centered horizontally, but it may be very rare to know what the auto value does.

Simply put, for an element that does not have a fixed width or height value, if it can be automatically stretched, auto can be used to allocate the remaining amount of space when a fixed value is set.

Feel a bit awkward, for example, there is a fixed width of the block element, we want him to show on the right, the most common is to use the float property, but with Margin-left:auto, the same can be achieved:

<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;}

A valid scenario for setting the margin value to auto includes:

1. Common fixed width block element, horizontal direction setting is effective;

2. Absolute positioning element, in the case of setting a pair of left/right,top/bottom or both, the fixed width or height is effective;

3. A child element margin value of auto is valid in case the parent element is Display:flex;

More about CSS Properties margin related articles please follow topic.alibabacloud.com!

