divの子供たちをCSSでスペースを取る方法は？

Question

私は30pxと言うとギャップが欲しいです。私のdivのすべての子供の間。たとえば、私が持っている場合：

<div id="parent">  
    <img ... /> 
    <p>...</p> 
    <div>.......</div> 
</div> 

私はそれらのすべてに30pxのスペースが必要です。それらの間の。私はCSSでこれをどうやって行うことができますか？

Answer 1

未知数の子供のために、あなたは使うことができます。

#parent > * { 
    margin: 30px 0; 
} 

これは#parentのすべての直接の子に30pxの上部と下部の余白を追加します。

しかしimgは、ブロックのデフォルトとして表示されていないので、あなたが使用することができます：ブロック要素の

#parent > * { 
    display: block; 
    margin: 30px 0; 
} 

垂直余白が崩壊されます。しかし、あなたは親のdivの上と下に余白を持っています。これを回避するには、次のコードを使用します。

これは、先頭の余白のみを追加し、最初の要素の上端を削除します。

Answer 2

ちょうどあなたのp要素に30pxの上部と下部の余白を置く：

p { margin: 30px 0 30px 0; } 

注：上記すべてあなたのp要素に、このマージンが追加されますが。この1つだけに制限し、いずれかのインラインスタイル属性を追加するには：

<p style="margin: 30px 0 30px 0;">...</p> 

またはより良いクラスを使用します。

<p class="mypara">...</p> 

とCSSの：

ところで

p.para { margin: 30px 0 30px 0; } 

、ここに表記を余裕の場合：

margin: top right bottom left; 

またはnは個別に上下のマージンを指定します。

margin-top: 30px; 
margin-bottom: 30px; 

ですから、このようなクラスかもしれない：

.bord { margin-bottom: 30px; } 

を、あなたは30pxの余白下を持ちたいすべての要素にこのクラスを追加します。

<div class="bord">....</div> 

Answer 3

コードでそれらのためのCSSクラスを作成します。

.BottomMargin 
{ 
    margin-bottom:30px; 
} 

そして、このように手動でのjQueryを使用したり、子供parent年代にこのクラスを割り当てる：最後の一つを持っていない可能性があり、これはjQueryのを使用してもなんとかです

<div id="parent">  
    <img class="BottomMargin" ... /> 
    <p class="BottomMargin">...</p> 
    <div>.......</div> 
</div> 

。

Answer 4

おそらく最も簡単な方法はこれです：

#parent * { 
    margin-bottom: 30px; 
} 

または

#parent * { 
    margin: 15px 0; 
} 

これはpとdivタグ内のものを含め、#parentにすべてを取得すること、しかし、覚えておいてください。直属の子のみが必要な場合は、代わりに#parent > *を使用できます（これは直接子孫セレクタと呼ばれます）。あなたがする必要がある場合がありますので

、<img>は、デフォルトではインライン要素である、心に留めておいてください：

#parent img { 
    display: block; 
} 

それはマージンを使用します。

Answer 5

あなたはCSSのstandartsでそれを試すことができます。

div > *{ 
    margin-top:30px; 
} 

詳細情報はここで見つけることができますhttp://www.w3.org/TR/CSS2/selector.html#child-selectors

Answer 6

最も確実な方法は、最後の例外と内部のすべての要素にクラスを追加することです1。

<style> 
.margin30 { 
    margin-bottom: 30px; 
} 
<div id="parent">  
    <img class="margin30" ... /> 
    <p class="margin30">...</p> 
    <div>.......</div> 
</div> 

このようにして、追加の要素をクラスでタグ付けすることができます。あなたがそうのように、スペースでタグにクラス値内でそれらを分離することによって、スタイル要素を複数クラスのことを覚えておいてください：

<img class="margin30 bigimage" ... /> 

最後に、あなたは、私の頭の上からのJavascript（コードで動的にクラスをない添付することができます、無健全性チェックやエラー処理、メーリングリストなど）テスト：要素のすべての側面から

function addSpace(elementId) { 
    children = document.getElementById(elementId).childNodes; 
    for (i=0;i<(children.length - 1);i++) 
     children[i].className = "margin30 " + children[i].className; 
}