margin和padding有什麼區別

admin發表於2017-02-19
padding
一.margin屬性的作用:

此屬性用來定義物件的外邊距，既然是外邊距那就是物件外邊緣向外的衍伸，可以產生對外部其他物件的影響。例如: 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.parent 
{
  border:1px solid red;
  width:200px;
  height:200px;
}
.children 
{
  border:1px solid green;
  width:150px;
  height:150px;
  margin-left:20px;
}
</style>
</head>
<body>
<div class="parent">
  <div class="children"></div>
</div>
</body>
</html>

以上程式碼中margin-left定義了子div邊框外側距離父div邊框內側距離。

二.padding的作用:

padding屬性用於定義物件內側距離它內部物件的距離。例如: 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.parent {
  border:1px solid red;
  width:200px;
  height:200px;
  padding-left:20px;
}
.children {
  border:1px solid green;
  width:150px;
  height:150px;
}
</style>
</head>
<body>
<div class="parent">
  <div class="children"></div>
</div>
</body>
</html>

padding-left屬性規定了父div左內側距離它所容納的物件的距離。

下面看一個圖示:

a:3:{s:3:\"pic\";s:43:\"portal/201702/19/103653nirqjil7xiw1yzxi.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章