CSS attributes: margin and cssmargin

CSS attributes: margin and cssmargin
0. Effect on the visible width of the image itself

1> change the visible width of the block element in the standard document stream without setting the width value

In the standard Document Stream, when a block element with no width is set, its own width is 100% of the width of the parent element after it has content or height, at this time, you can set the margin value in the horizontal direction for the block element to change the visible 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 will not be stretched.

This feature is useful in the bootstrap layout.

<Div class = "wrap"> parent element padding: 0 10px; <div class = "yellow"> This block element does not set the margin value </div> <div class = "red"> This block element sets margin-left:-10px; margin-right:-10px; stretched the element width </div>

* {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 the unspecified width, but set the absolute positioning element of the positioning (for example, top/bottom, left/right ).

When no width is set for the absolute positioning element, but the top/bottom and left/right values are set, the element is stretched. For example, if left: 0; right: 0; the width of the element is 100% of the width of the first parent element to be located, the visual width of the element can be changed through margin. Similarly, for an absolute positioning element, we can change its visual height.

 

<Div class = "wrap"> parent element position: relative; <div class = "yellow"> absolute positioning, top: 0; bottom: 0; vertical stretching element, set margin to change the visual height </div>

* {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 percentage value

Like padding, for elements normally in the standard Document Stream, when the margin value of an element is a percentage value, its actual value is equal to the width * Percentage of the parent element;

When an element is set to absolute positioning, its actual value is equal to the width * Percentage of the first parent element to which it is located.

<Div class = "wrap"> parent element width: 10% PX; <div class = "yellow"> margin-top; actual margin-top = 400px * 10% = 40px </div>

* {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 overlapping

The margin overlap usually occurs between sibling elements and between parent and child elements. If you do not pay attention to it, the margin overlap may often cause us a little trouble, here, we will summarize the overlap of margin.

1> brothers

When two elements overlap, the actual values are as follows:

When will there be a margin overlap?

For two adjacent sibling elements, as long as they are block elements in the standard Document Stream, margin overlaps in the vertical direction.

2> auto value of 3. margin between the parent element and the first/last child element

Set margin: 0 auto for a block element with a fixed width to center the element horizontally. This should be frequently used by many people. However, few people may know the specific function of auto value.

To put it simply, if an element without a fixed width or height value can be automatically stretched, auto can be used to allocate the remaining space after a fixed value is set.

It feels a bit open. For example, there is a block element with a fixed width. We want it to be displayed on the right. The most common thing is to use the float attribute, but use margin-left: auto; the same can be achieved:

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

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

Effective scenarios for setting the margin value to auto include: