CSSにおけるmarginの認識



marginで枠線を設定する順序は上下左です
{margin:top right buttom left}

個別の設定と同等
{
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }
省略の表記規則は次のとおりです.
外付け距離に3つの値を指定すると、4番目の値(すなわち左の外付け距離)が2番目の値(右の外付け距離)からコピーされます.2つの値が与えられている場合、4番目の値は2番目の値からコピーされ、3番目の値(下余白)は1番目の値(上余白)からコピーされます.最後のケースでは、1つの値しか与えられていない場合、他の3つの外距離はこの値(上外辺距離)によってコピーされます.
marginを負に設定
(以下はネット上でコピーした図です)
marginは負の値に設定された移動効果です.
次はDIVが中央にある例です
Divの中央効果の設定について説明します.まず、Divを絶対レイアウトまたはfixedで「中央」に設定します.ここでの中央はheightとwidthが50%設定されていることを意味します.次にDIVの幅と高さの1/2を計算する.最後にmargin-topとmargin-leftを第2ステップ値の負数に設定します.
ステップ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;
}
ステップ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
        });

まとめ:1.負の数marginの要素に設定し、システムが負の数の特徴の外側距離をどのように表現するか.エレメント自体は変化しないので、エレメントに相当するparentは指定された反対方向に移動し、効果を達成します(個人的な観点).