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;

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

margin屬性引數規則如下：

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

（2）.如果只提供一個，那這個一個頂四個，可以作用於四個方位。

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

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

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

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

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

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.box{ 
  width:300px; 
  height:300px; 
  background-color:#000; 
  overflow:hidden; 
} 
.ant{ 
  width:150px; 
  height:150px; 
  background-color:#ff0000; 
  margin:40px 20px 30px 10px; 
} 
</style> 
</head> 
<body> 
<div class="box"> 
  <div class="ant"></div>  
</div> 
</body> 
</html>

分別設定上、右、下、左的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="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.box{ 
  width:300px; 
  height:300px; 
  background-color:#000; 
  overflow:hidden; 
} 
.ant{ 
  width:150px; 
  height:150px; 
  background-color:#ff0000; 
  margin:20%; 
} 
</style> 
</head> 
<body> 
<div class="box"> 
  <div class="ant"></div>  
</div> 
</body> 
</html>

百分數是以父元素的尺寸為參考的。

單獨設定某一方位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="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.box{ 
  width:300px; 
  height:300px; 
  background-color:#000; 
  overflow:hidden; 
} 
.ant{ 
  width:150px; 
  height:150px; 
  background-color:#ff0000; 
  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>

如果方位上出現衝突，比如上面程式碼中margin-top與margin-bottom在方位上正好相反，那麼會遵循哪個方位的設定呢，答案是：左上方位的優先順序要大於右下方位的優先順序。

相關文章