web-dev-qa-db-ja.com

CSSマージン自動中央と上部マージン-有効？

この有効なCSSはdivを中央に配置し、上部マージンも適用しますか？

div {
     margin: 0 auto;
     margin-top: 30px;
     }
htmlcssmargin
19
user1040259

以下を使用してマージンを指定します。

div { margin: 30px auto 0; }

これは以下の略記です：

div { margin : 30px auto 0 auto; } /* margin: [top] [right] [bottom] [left]; */

これは以下の略記です：

div {
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

これで、marginsやpaddingを指定するさまざまな方法がわかりました。選択はあなた次第です。

優先順位に関する限り、後の定義が適用されます。 the spec で定義されています。

要素/プロパティの組み合わせの値を見つけるには、ユーザーエージェントは次の並べ替え順序を適用する必要があります。

  1. 対象のメディアタイプについて、問題の要素とプロパティに適用されるすべての宣言を見つけます。関連するセレクターが問題の要素と一致する場合、宣言が適用されます。
  2. 宣言の主な種類は、重みとOriginによるものです。通常の宣言の場合、作成者のスタイルシートは、デフォルトのスタイルシートをオーバーライドするユーザーのスタイルシートをオーバーライドします。 「！important」宣言の場合、ユーザースタイルシートは、デフォルトのスタイルシートをオーバーライドする作成者のスタイルシートをオーバーライドします。 「！important」宣言は通常の宣言をオーバーライドします。インポートされたスタイルシートは、それをインポートしたスタイルシートと同じOriginを持ちます。
  3. 2番目のソートは、セレクターの具体性によるものです。より具体的なセレクターは、より一般的なセレクターをオーバーライドします。疑似要素と疑似クラスは、それぞれ通常の要素とクラスとしてカウントされます。
  4. 最後に、指定された順序で並べ替えます。2つのルールが同じ重み、Originとspecificityを持つ場合、後者の指定が優先されます。インポートされたスタイルシートのルールは、スタイルシート自体のルールの前にあると見なされます。

個々の宣言の「！important」設定とは別に、この戦略により、作者のスタイルシートは読者のスタイルシートよりも重みが高くなります。したがって、ユーザーエージェントは、たとえばプルダウンメニューを使用して、特定のスタイルシートの影響を無効にする機能をユーザーに提供することが重要です。

他の人が述べたように、divが中央に表示されるようにするには、固定幅を指定する必要があるでしょう...

38
xandercoded

はい。ただし、divの中央揃えに関しては、widthも適用する必要があります。

6
ggreiner

はい。そして彼らは正しい：

div { width: 90%; margin : 30px auto 0 auto; }

私は通常、90％の幅を出発点として使用します。

5
Computer Guy

なぜだかわかりません...これを次のように短くすることもできます：

div {margin: 30px auto 0;}

3
daGUY

なぜなら、マージン：0 autoは上下を0に設定し、左右を自動に設定するため、上部を30pxに設定することは、margin：30px auto 0 autoと言うのと同じです。

3
zero

有効ですが、次のように短くすることができます。

div {margin: 30px auto 0;}

3つの値のみを指定すると、中央の値が左側と右側の両方に適用されます。

2
Jezen Thomas

はい、有効です。 margin-topはmarginルールを上書きします。

中央にwidthを追加したいかもしれませんが。

2
Madara Uchiha