如何使 padding:auto 在 CSS 中工作?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18545587/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:12:31  来源:igfitidea点击:

How to make padding:auto work in CSS?

csscss-reset

提问by Vaibhav Kanwal

I am working on a legacy project that has CSS Reset with *{ margin:0; padding:0 }applied to everything. Now, my new code doesn't need that as it relies on Normalize.css. This hasn't been much of a problem but at some places I need to use both styles.

我正在处理一个将 CSS 重置*{ margin:0; padding:0 }应用于所有内容的遗留项目。现在,我的新代码不需要它,因为它依赖于 Normalize.css。这不是什么大问题,但在某些地方我需要同时使用这两种风格。

How do I unreset my CSS? I have been able to do *{margin:auto}which works fine. The same isn't true about padding. Is there an equivalent way to reset the padding. How do you go about solving this?

如何取消重置我的 CSS?我已经能够做的*{margin:auto}很好。填充并非如此。是否有等效的方法来重置填充。你如何解决这个问题?

回答by Mr. Alien

autois not a valid value for paddingproperty, the only thing you can do is take out padding: 0;from the *declaration, else simply assign paddingto respective property block.

auto不是padding属性的有效值,您唯一可以做的就是padding: 0;*声明中取出,否则只需分配padding给相应的属性块。

If you remove padding: 0;from * {}than browser will apply default styles to your elements which will give you unexpected cross browser positioning offsets by few pixels, so it is better to assign padding: 0;using *and than if you want to override the padding, simply use another rule like

如果您padding: 0;* {}浏览器中移除,则会将默认样式应用于您的元素,这会给您带来意想不到的跨浏览器定位偏移几个像素,因此最好padding: 0;使用 using进行分配,*而不是如果您想覆盖填充,只需使用另一个规则,例如

.container p {
   padding: 5px;
}

回答by probablyup

You should just scope your * selector to the specific areas that need the reset. .legacy * { }, etc.

您应该将 * 选择器范围限定为需要重置的特定区域。.legacy * { }, 等等。

回答by Adam Grant

The simplest supported solution is to either use margin

最简单的支持解决方案是使用保证金

.element {
  display: block;
  margin: 0px auto;
}

Or use a second container around the element that has this margin applied. This will somewhat have the effect of padding: 0px autoif it did exist.

或者在应用了此边距的元素周围使用第二个容器。padding: 0px auto如果它确实存在,这将在某种程度上产生影响。

CSS

CSS

.element_wrapper {
  display: block;
  margin: 0px auto;
}
.element {
  background: blue;
}

HTML

HTML

<div class="element_wrapper">
  <div class="element">
    Hello world
  </div>
</div>

回答by Bj?rn Tantau

You can reset the padding (and I think everything else) with initialto the default.

您可以将填充(我认为其他所有内容)重置initial为默认值。

p {
    padding: initial;
}

回答by Facundo Colombier

if you're goal is to reset EVERYTHING then @Bj?rn's answer should be your goal but applied as:

如果您的目标是重置一切,那么@Bj?rn 的答案应该是您的目标,但适用于:

* {
  padding: initial;
}

if this is loaded after your original reset.css should have the same weight and will rely on each browser's default padding as initial value.

如果在原始 reset.css 之后加载它应该具有相同的权重,并且将依赖每个浏览器的默认填充作为初始值。