閱讀(11.2k) 書(shū)簽贊(4) 我要糾錯(cuò)

CSS Margin外邊距

2018-10-27 17:09 更新

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

以下列表包含外邊距屬性的說(shuō)明。

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

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

以下代碼將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.m.hgci.cn/style/download.png" alt="small  banana">
  <img src="https://www.m.hgci.cn/style/download.png" alt="small  banana">
</body>
</html>

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

Margin 簡(jiǎn)寫屬性

margin屬性可以有一到四個(gè)值。

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	設(shè)置底部的邊距	1
margin-left	設(shè)置左邊距	1
margin-right	設(shè)置右邊距	1
margin-top	設(shè)置頂邊距	1
margin	設(shè)置四個(gè)方向的頁(yè)邊距	1

CSS Margin外邊距

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

Margin 簡(jiǎn)寫屬性

相關(guān)屬性

推薦文章

推薦教程

推薦課程

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