padding和margin對於position定位的影響

admin發表於2017-03-19
原文網址 : https://www.softwhy.com/article-3765-1.html
padding

下面分別介紹一下padding和margin對於定位的影響。

一.padding對於定位的影響:

當然這裡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">
#box{
  width:400px;
  height:600px;
  background:blue;
  position:relative;
  padding:50px;
}
#inner{
  width:100px;
  height:100px;
  background:red;
  position:red;
  position:relative;
  left:0px;
  top:0px;
}
</style>
</head>
<body>
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

從上面程式碼的效果可以看出，padding是對相對定位產生影響的。

當然並不是說相對定位的元素就無法進入到padding的範圍，只要把left或者top屬性值設定為負數即可。

程式碼如下:

[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:400px;
  height:600px;
  background:blue;
  position:relative;
  padding:50px;
}
#inner{
  width:100px;
  height:100px;
  background:red;
  position:red;
  position:relative;
  left:-20px;
  top:0px;
}
</style>
</head>
<body>
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

從上面的程式碼效果可以看到，定位的子元素已經進入的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">
#box{
  width:400px;
  height:600px;
  background:blue;
  position:relative;
  padding:50px;
}
#inner{
  width:100px;
  height:100px;
  background:red;
  position:red;
  position:absolute;
  left:0px;
  top:0px;
}
</style>
</head>
<body>
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

需要強調的一點，如果沒有規定left和top值的話，也是會和正常文件流中的元素一樣是有影響的。

二.margin對於定位的影響:

當然這個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:400px;
  height:600px;
  background:blue;
  position:relative;
}
#inner{
  width:100px;
  height:100px;
  background:red;
  position:red;
  position:absolute;
  left:0px;
  top:0px;
  margin:50px;
}
</style>
</head>
<body>
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

從上面的程式碼可以看出，外邊距對於定位是有影響的，對於相對定位也是如此。

相關文章