在编写 css 样式过程中，有时会遇到css不起作用的情况，无论您怎么修饰，网页就是不变化。例如：无论怎么修改 margin-top、margin-bottom、margin-left 和 margin-right，它们都不起作用。css margin无效不起作用通常是由于少设置了一些属性，只要补上它们，margin 就会起作用。

css margin 无效不起作用举例如下：

    body{margin-left:auto; margin-right:auto; }     .item{width:950px; }     .itemList{margin-top:10px;}     .leftList{width:460px; height:250px; float:left; margin-right:10px; border:#d1dadf 1px solid;}     .rightList{width:460px; height:250px; float:left; border:#d1dadf 1px solid;}     body,div,ul,li,input{padding:0; margin:0;}     ul,li,ol{list-style:none;}   

                    网站产品列表         ul li 列表                       文章列表         ul li 列表                 margin无效   

效果如下图所示：

图1

margin无效所在的 div 层虽然加了 margin-top:100px;，但它仍然靠近上面列表的边框，所加的 margin-top:100px 根本没有起作用。

.itemList{margin-top:10px;overflow:hidden;}

则 margin无效的 div 层立即下移了 100 像素，如图2所示：

图2

.itemList{margin-top:10px;width:950px;}

也可以达到方法1的效果，见图2所示。

也可以达到上面两种方法的效果，见图2。

提示：数字与 px 不能有空格，例如 margin-top:100 px 无效，必须把 100 与 px 之间的空格去掉，即 margin-top:100px。

除了上面三种方法，可能还有其它方法也有异曲同工之妙，自己可以探究尝试。

Css 为：

    .page{margin-left:auto; margin-right:auto; padding:10px; border:#d1dadf 1px solid;}   

html 为：

Css margin auto 不能居中

效果如图3所示：

图3

解决方法：

只需在 Css 中加宽度，box 就会居中，则 Css 变为：

.page{width:600px; margin-left:auto; margin-right:auto; padding:10px; border:#d1dadf 1px solid;}

效果如图4所示：

图4