CSS Margin外邊距
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.w3cschool.cn/style/download.png" alt="small banana">
<img src="https://www.www.w3cschool.cn/style/download.png" alt="small banana">
</body>
</html>
對于內聯元素,其邊距不會顯示在頂部和底部邊緣。
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 |