Understanding margin in CSS_html/css_WEB-ITnose

The order of setting borders in margin is top right, bottom left

{margin：top right buttom right}

which is equivalent to the separate settings

{  margin-top: 20px;  margin-right: 30px;  margin-bottom: 30px;  margin-left: 20px;  }

The omitted writing rules are:

If 3 values ​​are specified for the margin, the fourth value (i.e. the left margin) will be changed from The second value (right margin) is copied. If two values ​​are given, the 4th value will be copied from the 2nd value, and the 3rd value (bottom margin) will be copied from the 1st value (top margin). In the last case, if only one value is given, then the other three margins are copied from this value (top margin).

Set margin to a negative value

(The following is a picture copied from the Internet)

Set the margin to a negative value for the movement effect.

The following is an example of DIV centering

Introducing the centering effect of setting Div: First, set the Div to "center" in an absolute layout or fixed way. The centering here is just a representative The height and width are set to 50%; secondly, calculate 1/2 of the width and height of the DIV; finally, set margin-top and margin-left as negative numbers of the second step value;

First step:

.loginModal {    display: none;    background: #FDF3C1;    color: #000000;    padding: 20px;    border: 20px solid #8F6031;    font-size: 1.2em;    float: left;    position: fixed;    height: 175px;    width: 300px;    top: 50%;    left: 50%;    z-index: 200;}

Step 2:

 var modalMarginTop = ($('#' + modalID).height() + 80) / 2;        var modalMarginLeft = ($('#' + modalID).width() + 80) / 2;        /* apply the margins to the modal window */        $('#' + modalID).css({            'margin-top' : -modalMarginTop,            'margin-left' : -modalMarginLeft        });

Summary: 1. How does the system show the characteristics of negative margins for elements set to negative margins? distance. Because the element itself does not change, the parent of the element will move in the opposite direction to achieve the effect (personal opinion).