閱讀(11.6k) 書簽贊(4) 我要糾錯

CSS Margin外邊距

2018-10-27 17:09 更新

Margin外邊距是元素邊界與其周圍之間的距離。這包括其他元素和父元素。

以下列表包含外邊距屬性的說明。

margin-top
設置頂邊的邊距。
Value: auto length %
margin-right
設置右邊的邊距。
Value: auto length %
margin-bottom
設置底邊的頁邊距。
Value: auto length %
margin-left
設置左邊的邊距。
Value: auto length %
margin
此簡寫屬性在單個聲明中設置所有邊的邊距。
Value: 1 - 4 auto length %

百分比值始終從包含塊的寬度導出，即使用于填充頂部和底部邊緣。

以下代碼將Margin添加到元素。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
img {
  border: 4px solid black;
  background: lightgray;
  padding: 4px;
  margin: 4px 20px;
}
</style>
</head>
<body>
  <img src="https://www.www.yjpub.cn/style/download.png" alt="small  banana">
  <img src="https://www.www.yjpub.cn/style/download.png" alt="small  banana">
</body>
</html>

對于內聯(lián)元素，其邊距不會顯示在頂部和底部邊緣。

Margin 簡寫屬性

margin屬性可以有一到四個值。

margin: 2px 5px 7px 9px;
    top margin is 2px
    right margin is 5px
    bottom margin is 7px
    left margin is 9px

margin: 2px 5px 7px;
    top margin is 2px
    right and left margins are 5px
    bottom margin is 7px

margin: 2px 5px;
    top and bottom margins are 2px
    right and left margins are 5px

margin: 2px;
    all four margins are 2px

相關屬性

屬性	描述	CSS
margin-bottom	設置底部的邊距	1
margin-left	設置左邊距	1
margin-right	設置右邊距	1
margin-top	設置頂邊距	1
margin	設置四個方向的頁邊距	1