margin-left與left、margin-right與right區別

margin-left與left區別

可擴展爲margin-left、margin-top、margin-bottom、margin-right與left、top的區別

1. 使用margin-left時，父容器不考慮是否設置了position
2. 使用left前提是必須設置本身的position:absolute或relative，否則不生效，top等亦是如此

margin與padding區別

1. margin：0 auto 表示距離頂部0其它按瀏覽器自適應，margin：10% 20%；表示距離上下10%；左右20%
margin表示外間距，容器外部距離其它容器的間距
2. padding：表示容易內間距，容器內的內容距離容器本身個邊上的間距，不允許使用負值

試容器居中的方式

設置定位：距離頂部top50%，則容器整體距離頂部50%； margin-top: -400px;距離頂部-400px;表示容器的一半大小；剛好居於中間

width:800px;
height:800px;
position: absolute;
top: 50%;
margin-top: -400px;
left: 50%;
margin-left: -400px;