CSS margin 外邊距

admin發表於2018-08-03
CSS

margin 單詞翻譯成漢語之後“盈餘”和“元素外空白”的意思。

那麼使用 margin 作為屬性規定元素的外邊距恰如其分。

既然是外邊距，那一定是元素外部的區域，準確的說就是在 border 邊框外建立的"空白"區域。

盒模型圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/21/104120gpws5dkaitp5hstc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
margin:5px 15px 35px 45px;

margin 屬性可以有 1-4 個屬性值用來規定四個方位的外邊距。

屬性值規則如下：

（1）.如果提供四個屬性值，將會按照上右下左的順序分別作用於四個方位。

（2）.如果只提供一個，作用於四個方位。

（3）.如果提供兩個，第一個作用於上下方位，第二個作用於左右方位。

（4）.如果提供三個，第一個用於上方位，第二個用於左、右方位，第三個用於下方位。

塊級元素與內聯元素外邊距的區別：

（1）.塊級元素沒有意外情況，包括塊級內聯元素。

（2）.內聯元素在左右方位同樣完全沒有問題，但是上下方位可能出現想象不到的現象。

程式碼例項如下：


[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style> 
.box { 
  width: 200px; 
  height: 100px; 
  border: 2px dotted #ccc;
  overflow: hidden; 
} 
.ant { 
  width: 150px; 
  height: 50px; 
  border: 2px dotted green;
  margin: 40px 20px 30px 10px; 
} 
</style> 
</head> 
<body> 
<div class="box"> 
  <div class="ant"></div>  
</div> 
</body> 
</html>

上述程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/26/173529plqqj2rouhfzz8p2.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

分別設定上、右、下、左的 margin 值為：40px、 20px 、30px 和 10px。 

特別說明：預設情況下，優先滿足左外邊距和上外邊距，具體參閱右外邊距失效一章節。

百分比定義 margin 屬性值：

margin 屬性值不但可以是 <length> 形式，也可以使用百分比。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
div { margin: 20% }

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style> 
.box { 
  width: 200px; 
  height: 100px; 
  border: 2px dotted #ccc;
  overflow: hidden; 
} 
.ant{ 
  width: 150px; 
  height: 50px; 
  border: 2px dotted green;
  margin: 20%; 
} 
</style> 
</head> 
<body> 
<div class="box"> 
  <div class="ant"></div>  
</div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/26/174449n1k19r5j55z2y9r1.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

百分數是以塊級父元素的寬度尺寸為參考，只參考寬度尺寸。

單獨設定某一方位margin值：

上面的程式碼都是一次性設定四個方位的內邊距。

也可以單獨設定某一方位的內邊距，使用如下屬性即可:

（1）.margin-top：設定上內邊距。

（2）.margin-right：設定右內邊距。

（3）.margin-bottom：設定下內邊距。

（4）.margin-left: 設定左內邊距。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.box { 
  width: 200px; 
  height: 100px; 
  border: 2px dotted #ccc;
  overflow: hidden; 
} 
.ant { 
  width: 150px; 
  height: 50px; 
  border: 2px dotted green;
  margin-top: 10px; 
  margin-right: 20px; 
  margin-bottom: 30px; 
  margin-left: 40px; 
} 
</style> 
</head> 
<body> 
<div class="box"> 
  <div class="ant"></div>  
</div> 
</body> 
</html>

上述程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/26/174725mw8fvgigh0y45448.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

padding 是複合屬性，可以單獨設定某一方位的內邊距。

特別說明：在無必要的情況下，不推薦使用上述方式設定內邊距。

相關文章