Html 如何在css中覆盖边距和右/左？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28105751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to override margin and right/left in css?
提问by Alexey
I have a div with this styling:
我有一个具有这种样式的 div：
#slogan{
font-size:24px;
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
The latter 4 styles just center the div content on the page.
后 4 种样式只是使页面上的 div 内容居中。
If the page gets too big, I don't want to use the following styling anymore, so I apply this style:
如果页面变得太大，我不想再使用以下样式，所以我应用了这种样式：
@media only screen and (min-width: 941px){
#slogan {
font-size: 24px;
position: absolute;
min-width: 810px;
text-align: right;
}
}
Which displays the content a certain amount from the left edge of the page. I tested these styles in the f12 dev tool, and it looks right. However, when I apply the style inside the css sheet, the margin and right/left parts get still applied to the element, and I don't know how to cancel them (there is no default value for margin).
从页面的左边缘显示一定数量的内容。我在 f12 开发工具中测试了这些样式，看起来不错。但是，当我在 css 表中应用样式时，边距和右/左部分仍然应用于元素，我不知道如何取消它们（边距没有默认值）。
Any help?
有什么帮助吗？
回答by Gildas.Tambo
Use unset, inheritor initialto unset it.
使用unset,inherit或initial取消设置。
@media only screen and (min-width: 941px){
#slogan {
font-size: 24px;
position: absolute;
min-width: 810px;
text-align: right;
margin-left: initial;
margin-right: initial;
}
}
Here are some global values
以下是一些全局值
/* Global values */
margin: inherit;
margin: initial;
margin: unset;
回答by Ian Devlin
You could try:
你可以试试：
margin-left: unset;
margin-right: unset;
But I am not sure how well supported they are. Alternatively set them to 0 which is the default;
但我不确定他们的支持程度如何。或者将它们设置为 0，这是默认值；
回答by maioman
you could also set @media the other way
你也可以以另一种方式设置@media
@media only screen and (max-width: 941px){
#slogan {
position:absolute;
left:0;
right:0;}
}
回答by Sumit Pathak
if u want to overwrite the css then u have to use !important after attribute like below :--
如果你想覆盖 css，那么你必须使用 !important 属性，如下所示：--
#slogan{
font-size:24px;
position:absolute;
left:0;
right:0;
margin-left:auto !important;//Whatever u want to overwrite
margin-right:auto !important;
}
