[Back To Basic] css - 留白(margin)

留白(margin)

用來創造HTML元素周遭的留白(邊框之外)

單邊設定

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

簡寫(規則和border相同)

margin: 25px 50px 75px 100px;

附註

• 可以負值
• 兩個元素的margin如果上下交疊，會取最大值

e.g.

h1 {

  margin: 0 0 50px 0;

}

h2 {

  margin: 20px 0 0 0;

}

h1和h2之間的margin只會有50而不是70，這情境被稱為Margin Collapse