為什麼margin-right不生效

antzone發表於2017-04-08

margin-right在內聯元素上下方位也是有問題的，具體可以參閱為什麼padding和margin在span中不好用一章節。

下面再來介紹一個margin-right不無效的情況，程式碼例項如下:

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
#box{
  width:200px;
  height:150px;
  background-color:red;
  margin:0px auto;
  margin-top:50px;
  overflow:auto;
}
#inner{
  width:300px;
  height:100px;
  background-color:blue;
  margin-left:20px;
  margin-right:20px;
}
</style>
</head>
<body>
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

雖然上面程式碼設定了margin-right，但是在表現上並沒有效果。

截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/08/112422m7072qrxq4kq9qou.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

在標準瀏覽器中都是上面的表現，但是在IE8以下瀏覽器表現如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/08/112452v35tqrjy73s3jyrx.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章