CSS margin屬性取值

標籤：size   margin   左移   gre   分享   com   targe   org   develop   

margin表示一個元素的外邊距。取值為正值時，表示相對於正常流離鄰近元素更遠，而取負值時，使其更近

但是，設定margin後，四個方向的表現形式不同

自身發生移動：top、left

• margin-top

<div id="negtive_top"><div>margin-top: -50px;自身向上移動50px</div></div> CSS #negtive_top{ background-color: green; border: 2px solid red;}#negtive_top div{ background-color: yellow; border: 2px solid red; opacity: 0.5; margin-top: -50px;}

• margin-left

<div id="negtive_left"><div>margin-left: -50px;自身向左移動50px</div></div> CSS #negtive_left{ background-color: green; border: 2px solid red;}#negtive_left div{ background-color: yellow; opacity: 0.5; margin-left: -50px; border: 2px solid red;}

鄰近元素移動：right、bottom

• margin-right

<div id="negtive_right">margin-right: -50px;右邊的元素向左移動50px</div><div></div> CSS #negtive_right{ background-color: green; border: 2px solid red; float: left; margin-right: -50px;}#negtive_right+div{ background-color: yellow; opacity: 0.5; border: 2px solid red; float: left;}

• margin-bottom

<div id="negtive_bottom">margin-bottom: -50px;下方的元素向上移動50px</div><div></div> CSS #negtive_bottom{ background-color: green; border: 2px solid red; margin-bottom: -50px;}#negtive_bottom +div{ background-color: yellow; opacity: 0.5; border: 2px solid red;}

參考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin

CSS margin屬性取值