Understanding of margin in CSS

Understanding of margin in CSS

Set the border sequence in margin to upper right bottom left

{margin：top right buttom right}

It is equivalent to

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

The omitted writing rules are as follows:

If three values are specified for the outer margin, the 4th values (that is, the left margin) are copied from the 2nd values (the right margin. If two values are given, 4th values are copied from 2nd values, and 3rd values (bottom margin) are copied from 1st values (top margin. In the last case, if only one value is specified, the other three margins are copied from this value (top margin.

Set margin to a negative value.

(Here is a copy of the image on the Internet)

The effect of moving a margin value to a negative value.

The following is an example of DIV Center

This section describes how to set the Div center effect: first, set the Div to "center" in absolute layout or fixed mode. The center here only indicates that the height and width are set to 50%; calculate the width and height of the DIV by 1/2. Finally, set margin-top and margin-left to the negative values of the second step;

Step 1:

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

Conclusion: 1. Set it to a negative margin element and how the system shows the feature margin of a negative number. Because the element itself does not change, the parent equivalent to the element moves in the opposite direction to achieve the effect (personal opinion ).