Question

初学div+css，很迷惑，感觉一个设置了固定宽度的div设置了margin-left，那么margin-right就是确定的了

<style type="text/css">
<!--
body{
border:1px solid #cc0000;

}

#banner{
background-color:#cccccc;
height:150px;
width:300px;
margin-top:20px;
margin-right:30px;
margin-bottom:40px;
margin-left:50px;
padding-top:50px;
padding-right:40px;
padding-bottom:30px;
padding-left:20px;
border:2px solid #000000;
font-size:12px;
line-height:150%;}

-->
</style>
代码中为什么还要设置margin-right，感觉实际margin-right的值远远大于30px

Answer 1

楼主的关键问题在于没有理解盒子模型
width 是指内容的宽度,不包含 margin border padding 这三个.

你可以打开任意一个word文件,你根据盒子模型就会看到上面的四个属性.这是入门CSS的关键.

Answer 2

的确，如果只是单个，那就是多余。
但如果有别的情况，比如几个并列的，或者要和其他的子容器保持距离，就需要写这个。

Answer 3

首先 w3c标准中宽度并不包括marign 所以设置宽度和margin 并不冲突

Answer 4

margin是定义div距外部边框距离的！！所以，margin-left和margin-right不冲突。

Answer 5

这里的margin-left不是说这个div左边距离父级容器左边的距离，而是在它的左边加了一块属于它自己的区域，只是这块区域不用来显示内容，你看不到而已，此时这个div距离他左边还是0，因为这个距离是父级左边框减去这个div的左外边框位置（margin-left）；想象一下鸡蛋，蛋黄就是你看到的div区域，而他的蛋清就是margin，整个div（蛋清加蛋黄）到父级（蛋壳）的距离是以最外层的蛋清决定的，而不是最外层的蛋黄