20

P、LI、またはDIV要素がたくさんあり、それらの間に何もないとします。それらの間の垂直方向の間隔を制御したいので、それらはそれほどきつくはまりません。ただし、上下にスペースを追加する必要はありません。これは、親要素によって処理され、それ以上は必要ないためです。すべてのブロック要素で機能するこれを行う簡単な方法はありますか？

私はこのようなものを持っていると言います：

p {
  margin: 5px 0;
  }

その後

 <div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
   <p>4</p>
 </div>

しかし、divにはすでにパディングがあり、それをいじりたくないので、p1より上またはp4より下に5pxは必要ありません。p1とp2、p2とp3などの間に10pxが必要です。

私は何か厄介なことをすることができると確信しています（そして私は何度もあります）が、この一般的な状況のために多くの特別なケースをする必要がないよりクリーンなものを探しています。

4

5 に答える 5

48

隣接するセレクターを使用する

p + p { margin-top: 10px; }

基本的には、apが次々と来る場合はp、その間に10pxのマージンを与えるという概念です。

あなたの使用法は似たようなものです

p + p, li + li, div + div { 
    margin-top: 10px;
}
于 2012-04-25T04:44:38.497 に答える
4

これは、:last-childまたはを使用して行うこともできます:first-child

次に例を示します。

p, li, div {
    margin-bottom: 10px;
}

p:last-child, li:last-child, div:last-child {
    margin-bottom: none;
}
于 2012-04-25T04:50:27.360 に答える
2

隣接するセレクターを使用できます。次のように定義できます。

p + p{
 margin-top:0;
}

また

p ~ p{
 margin-top:0;
}
于 2012-04-25T04:59:15.807 に答える
0 
p, li, div {
    margin-bottom: 10px;
}
#parentID {
    margin-bottom: -10px;
}
于 2012-04-25T04:42:46.220 に答える
0 
p { margin: 10px 0 0 0; }
p:first-child { margin: 0; }

つまり、すべてのp要素の上部マージンを10pxに設定し、他のマージンをゼロに設定します。ただし、最初のp要素では、上部マージンもゼロに設定します。

これは、古いブラウザでサポートされていないコンテキストセレクタを使用する他の多くのアプローチよりも広く機能します。ブラウザーを最大限にサポートするにはp、マークアップの最初の要素にクラスを割り当て、の代わりにクラスセレクターを使用しp:first-childます。

CSSは要素間ではなく要素を操作するため、これは可能な限り最も簡単な方法です。pしたがって、一連の要素の最初の要素を区別する何らかの方法が必要ですp。

p { margin: 5px 0; }（質問で言及されている）隣接する垂直マージンが崩壊するため、10pxではなく5pxの垂直マージンが作成されることに注意してください。

于 2012-04-25T05:14:18.077 に答える