Jak spacja dzieci div z css?

Question

Chcę luki powiedzmy 30 pikseli; między wszystkimi dziećmi mojego div. E.g jeśli mam:

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

Chcę, aby wszystkie miały przestrzeń 30px; między nimi. Jak mogę to zrobić z CSS?

Answer 1

Dla nieznanej liczby dzieci można użyć.

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

To doda górny i dolny margines 30px do wszystkich bezpośrednich dzieci #parent.

Ale img nie wyświetla domyślnie bloku, więc można użyć:

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

Pionowe marginesy elementów blokowych zostaną zwinięte. Ale będziesz miał marginesy u góry iu dołu div twojego rodzica. Aby tego uniknąć, należy użyć następującego kodu:

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

#parent > *:first-child { 
    margin-top: 0px; 
} 

Doprowadzi to tylko górny margines i usunie górny margines dla pierwszego elementu.

Answer 2

Wystarczy umieścić górny i dolny margines 30px na elemencie p:

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

Uwaga: Powyższe doda ten margines wszystkie swoich elementów p. Aby ograniczyć się tylko do tej jednej, albo dodać atrybut style inline:

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

lub lepiej użyć klasy:

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

oraz w CSS:

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

Btw, notacja tutaj dla marginesu wynosi:

margin: top right bottom left; 

A może ca n indywidualnie określić górny i dolny margines:

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

Więc można mieć klasę tak:

.bord { margin-bottom: 30px; } 

i dodać tę klasę do każdego elementu, który chcesz mieć margin-bottom o 30px:

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

Answer 3

Utwórz klasę CSS dla nich z kodem:

.BottomMargin 
{ 
    margin-bottom:30px; 
} 

i przypisać tej klasy do parent „s dzieci za pomocą jQuery lub ręcznie tak:

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

ostatni nie może mieć jeden i ten jest również wykonalne przy użyciu jQuery.

Answer 4

Prawdopodobnie Najprostszym sposobem jest taka:

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

lub

#parent * { 
    margin: 15px 0; 
} 

Pamiętaj jednak, że to dostanie wszystko w #parent, w tym rzeczy wewnątrz p i div tagów . Jeśli chcesz tylko bezpośrednie dzieci, możesz zamiast tego użyć #parent > * (nazywa się to bezpośrednim potomnym selektorem).

Pamiętaj, <img> jest elementem inline domyślnie, więc może trzeba zrobić:

#parent img { 
    display: block; 
} 

na to, aby korzystać z depozytów zabezpieczających.

Answer 5

Można spróbować go standarts CSS:

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

Więcej informacji można znaleźć tutaj: http://www.w3.org/TR/CSS2/selector.html#child-selectors

Answer 6

Najpewniejszym sposobem jest dodać klasę do wszystkich elementów wewnętrznych z wyjątkiem ostatniego jeden.

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

W ten sposób dodatkowe elementy można po prostu otagować klasą. Pamiętaj, że możesz multiclass elementy stylu oddzielając je w wartości klasy w tagu spacjami, tak jak poniżej:

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

Wreszcie, można dołączyć klas dynamicznie z JavaScript (kod przy mojej głowie, nie testowane, nie sprawdza Sanity lub błąd manipulacja, YMMV itd.):

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