CSS * {margin：0; padding：0;} override [英] CSS * {margin: 0;padding: 0;} override

问题描述

嘿，我需要一些帮助找出如何覆盖在我的css中的* {margin：0; padding：0;}。

原因是我有这个css：

  .postcomments {width：547px; padding：5px 5px 5px 5px; margin：0 0 5px 0;} 
 .postcomments a {text-decoration：underline;} 
 .postcomments ul {margin：0; padding：0; list-style-type：none;} 
 .postcomments ul li {width：547px; margin：0 0 5px 0; padding：0; list-style-type：none;} 
 .postcomments .right {color：＃474747; font-size：11px; background：#fff url（'http://www.nextbowluser.com/img/ucBG.gif'）no-repeat top left; line-height：17px; padding：5px 0 0 0; width：430px;位置：相对; float：right; min-height：50px;} 
 .postcomments .right .bottom {padding：0 5px 15px 5px; background：#fff url（'http://www.nextbowluser.com/img/ucBG.gif'）no-repeat bottom right; min-height：50px;} 
 .postcomments .arrow {left：-15px; top：20px; position：absolute;} 
 .avatar {border：none！important;} 
 
 .postcomments .left {float：left; margin：0 7px 0 0;} 
 .postcomments .gravatar {background：#fff; width：80px; height：60px; margin：0 0px 0 0; padding：3px;} 
 .postcomments .name {font-size：11px; margin：2px 0 0 0; color：＃000;} 
 .avatar {border：none！important;} 
  

它显示正好没有* {margin：0; padding：0;}：

 第一个注释
第二个注释
第三个注释
  

然而，当我添加到CSS，错误：

 第一则注释
第二次注释
第三次注释
  

我只是取出* {margin：0; padding：0;}，但页面上的其他一些东西，正确显示。所以我的问题是，我怎么能覆盖{margin：0; padding：0;}只是那个postcomments页面的一部分？

谢谢！ ：o）

David

更新：
。仍然不能正确得到它。在取出边距：0px的整个网站 - 它使网站看起来可怕。如果我必须添加margin：0px到页面的每个元素，使它看起来像它会与*然后那不好。

解决方案

您是否尝试过！important？

  .postcomments {
 margin：15px！important; 
 padding：15px！important; 
} 
  

我使用15px，但你可以使用任何值。 p>

Hey all, i am in need of some help with figuring out how to override the "* {margin: 0;padding: 0;}" in my css.

The reason why is that i have this css:

 .postcomments { width: 547px; padding: 5px 5px 5px 5px; margin: 0 0 5px 0;} 
 .postcomments a { text-decoration: underline;}
 .postcomments ul { margin: 0; padding: 0; list-style-type: none;}
 .postcomments ul li { width: 547px; margin: 0 0 5px 0; padding: 0; list-style-type: none;}
 .postcomments .right { color: #474747; font-size: 11px; background: #fff url('http://www.nextbowluser.com/img/ucBG.gif') no-repeat top left; line-height: 17px; padding: 5px 0 0 0; width: 430px; position: relative; float: right; min-height: 50px;}
 .postcomments .right .bottom { padding: 0 5px 15px 5px; background: #fff url('http://www.nextbowluser.com/img/ucBG.gif') no-repeat bottom right; min-height: 50px;}
 .postcomments .arrow { left: -15px; top: 20px; position: absolute;}
 .avatar { border: none !important;}

 .postcomments .left {float: left; margin: 0 7px 0 0;}
 .postcomments .gravatar { background: #fff; width: 80px; height: 60px; margin: 0 0px 0 0; padding: 3px;}
 .postcomments .name { font-size: 11px; margin: 2px 0 0 0; color: #000;}
 .avatar { border: none !important;}

and it displays just fine WITHOUT the * {margin: 0;padding: 0;}:

 1st comment
 2nd comment
 3rd comment

However, when i add that to the CSS, it makes the comments stack wrong:

 1st comment
    2nd comment
        3rd comment

I would just take out the * {margin: 0;padding: 0;} but some other things on the page needs that in order for that to be displayed correctly. So my question is, how can i override the {margin: 0;padding: 0;} for just that postcomments part of the page?

Thanks! :o)

David

UPDATE: Well. still can not get it correctly. After taking out the margin: 0px for the whole site- it makes the site look terrible. And if i have to add margin: 0px to every element to the page to make it look like it would with the * then thats not good. I still just need something to bypass it for the .postcomments part and thats it.

解决方案

Did you try it with !important?

.postcomments {
   margin: 15px  !important;
   padding: 15px !important;
}

i am using 15px, but you can use whatever value works for you

这篇关于CSS * {margin：0; padding：0;} override的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！