padding對於margin的影響簡單介紹

antzone發表於2017-03-27
原文網址 : https://www.softwhy.com/article-4760-1.html
padding

可能很多初學者對於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">
#box{
  width:150px;
  height:150px;
  background-color:green;
  padding:10px;
}
#inner{
  width:50px;
  height:50px;
  background:red;
}
</style>
</head>
<body>
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

上面的程式碼是沒有外邊距的時候，下面再看加上外邊距的情況，程式碼例項如下:

[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:150px;
  height:150px;
  background-color:green;
  padding:10px;
}
#inner{
  width:50px;
  height:50px;
  background:red;
  margin-left:10px;
}
</style>
</head>
<body>
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

從上面的程式碼表現可以看出，padding對margin外邊距是有影響的。

相關文章