web-dev-qa-db-ja.com

CSSでpadding：autoを機能させる方法は？

私は、すべてに*{ margin:0; padding:0 }が適用されたCSSリセットを持つレガシープロジェクトに取り組んでいます。現在、私の新しいコードはNormalize.cssに依存しているため、それを必要としません。これはそれほど大きな問題ではありませんでしたが、いくつかの場所では両方のスタイルを使用する必要があります。

CSSのリセットを解除するにはどうすればよいですか？私は*{margin:auto}を行うことができました。これはうまく機能します。パディングについても同様ではありません。パディングをリセットする同等の方法はありますか。これをどのように解決しますか？

csscss-reset
20
Vaibhav Kanwal

autoはpaddingプロパティの有効な値ではありません。できることは、padding: 0;宣言から*を取り出すことだけです。そうでない場合は、単にpaddingをそれぞれのプロパティブロックに割り当てます。

padding: 0;から* {}を削除すると、ブラウザーはデフォルトのスタイルを要素に適用するため、ブラウザーに数ピクセルの予期しないクロスブラウザーの位置合わせオフセットが与えられるため、padding: 0;を使用して*を割り当て、パディングをオーバーライドする場合よりも、別のスタイルを使用する方がよいのようなルール

.container p {
   padding: 5px;
}
22
Mr. Alien

セレクターのスコープをリセットする必要がある特定の領域に限定する必要があります。 .legacy * { }など.

3
probablyup

サポートされている最も簡単なソリューションは、マージンを使用することです

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

または、このマージンが適用されている要素の周囲に2つ目のコンテナを使用します。これには、多少の効果がありますpadding: 0px auto存在した場合。

[〜＃〜] css [〜＃〜]

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

[〜＃〜] html [〜＃〜]

<div class="element_wrapper">
  <div class="element">
    Hello world
  </div>
</div>
2
Adam Grant

すべてをリセットすることが目標であれば、@Björnの答えはあなたの目標であるはずですが、次のように適用されます。

* {
  padding: initial;
}

元のreset.cssが同じ重みを持ち、初期値として各ブラウザのデフォルトのパディングに依存する必要がある場合、これが読み込まれる場合。

0
Facundo Colombier

initialを使用して、パディングをリセットできます（他のすべてのことも考えます）。

p {
    padding: initial;
}
0
Björn Tantau