css margin 无效不起作用怎么办

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

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

1、css 为：

<style type="text/css">
    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;}
  </style>

2、html 为：

<div class="item">
    <ul class="itemList">
      <li class="leftList">
        <h3>网站产品列表</h3>
        <ul><li>ul li 列表</li></ul>
      </li>
      <li class="rightList">
        <h3>文章列表</h3>
        <ul><li>ul li 列表</li></ul>
      </li>
    </ul>
    <div style="margin-top:100px;">margin无效</div>
  </div>

效果如下图所示：

图1

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

   如何才能使 margin 起作用呢？有三种方法（适用于 margin-top、margin-bottom、margin-left 和 margin-right 无效），分别如下：

1、给样式 .itemList 添加 overflow:hidden; 即：

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

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

图2

2、给样式 .itemList 添加 width:950px; 即：

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

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

3、给 margin无效所在的 div 层加 clear:both; 即：

<div style="margin-top:100px; clear:both;"></div>

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

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

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

Css margin auto 不能居中

Css 为：

<style type="text/css">
    .page{margin-left:auto; margin-right:auto; padding:10px; border:#d1dadf 1px solid;}
  </style>

html 为：

<div class="page"><div>Css margin auto 不能居中</div></div>

效果如图3所示：

图3

解决方法：

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

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

效果如图4所示：

图4