1

ここに画像の説明を入力

添付の画像でわかるように、中にはラッパーdivがありますsection。
今、私は内部のすべてのコンテンツsectionにすべての側面にスペースが必要であることを望みます(つまり、内部のすべてのコンテンツにパディングが必要ですsection。私はできません、

section {
  padding:20px;
}

幅sectionを 1020 + 20 (左パディング) + 20 (右パディング) = 1060px に増やすためです。

内部の直接の子sectionは常にdivであるとは限らないため（ありasideますp）、私はできません

section div{
 margin:20px;
}

現在、私はやっています

section > *{
    margin:20px;
}

すべての要素がセクションから 20px のマージンを取るようにします。これは私にとってはうまくいきますが、パフォーマンスのボトルネックであるユニバーサルセレクター (*) を使用すべきではないと聞いています。また、これもクロスブラウザですか？

divまた、すべてのセクション内にすべての要素を含むラッパーを作成することも考えました。

section > div{
  margin:20px;
}

しかし、これは markup を変更する価値があります。ユニバーサルセレクターでとても遅くなりますか？

4

5 に答える 5

2

セクションの幅を 1020 + 20 (左パディング) + 20 (右パディング) = 1060px に増やすためです。

セットアップを試す

section{ 
   width: 980;
   padding: 20px;
 }

したがって、セクションの幅からパディングの 2 倍のサイズを差し引いた幅を設定すると、必要に応じて最終的にセクションは 1020 になります。

これが実際の例です

于 2012-05-27T15:13:46.477 に答える
1

いいえ。ここからパフォーマンスセクションを参照してくださいhttp://paulirish.com/2012/box-sizing-border-box-ftw/

于 2012-05-27T15:02:02.230 に答える
1

このように、コンマ区切りのセレクターを使用できます

section > div, section > aside, section > p {
    margin:20px;
}

または、もちろん、マージンを必要とするすべてのものにクラスを与え、そのクラスをセレクターに使用します。クラス名に「hasmargins」を使用しない限り...

しかし、ラッパー div 内のセクションにパディングを与えることで、ラッパー div の合計幅が増えると考える理由がわかりません。何か不足していますか？

于 2012-05-27T15:13:20.060 に答える
1

box-sizing: border-box ( http://paulirish.com/2012/box-sizing-border-box-ftw/ ) を使用すると、@Ana が言及しているように、親にパディングを追加できるため、実際に問題を解決できます。要素ですが、余分な幅は取りません。

参照: http://css-tricks.com/box-sizing/

于 2012-05-27T15:13:24.853 に答える
1

セクション幅については何もする必要はないと思います。また、親要素の幅が固定されている場合、子要素が親要素の幅を超えることはありません。

ここにデモがあります - http://jsfiddle.net/HNVg9/

于 2012-05-27T15:22:07.563 に答える