Как разместить детей в div с css?

Ответ 1

Для неизвестного количества детей, которые вы могли бы использовать.

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

Это добавит верхнее и нижнее поле в 30 пикселей всем прямым дочерним элементам #parent.

Но img не отображается как значение по умолчанию, поэтому вы можете использовать:

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

Вертикальные поля элементов блока будут свернуты. Но у вас будут поля в верхней и нижней части вашего родительского div. Чтобы избежать этого, используйте следующий код:

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

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

Это добавит только верхний край и удалит верхнее поле для первого элемента.

Ответ 2

Вероятно, самый простой способ:

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

или

#parent * {
  margin: 15px 0;
}

Имейте в виду, что это все будет в #parent, включая вещи внутри тегов p и div. Если вы хотите просто прямых детей, вы можете использовать #parent > * (это вызов прямого селектора потомков).

Имейте в виду, что <img> является встроенным элементом по умолчанию, поэтому вам может понадобиться:

#parent img {
  display: block;
}

чтобы использовать поля.

Ответ 3

Создайте для них класс CSS с кодом:

.BottomMargin
{
    margin-bottom:30px;
}

И присвойте этому классу parent детям с помощью jQuery или вручную:

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

у последнего может быть не один, и это также можно сделать с помощью jQuery.

Ответ 4

Просто разместите верхний и нижний край 30px на элементе p:

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

Примечание: выше будет добавлено это поле для всех ваших p-элементов. Чтобы ограничиться только этим, добавьте атрибут inline style:

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

или лучше использовать класс:

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

и в css:

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

Btw, обозначение здесь для поля:

margin: top right bottom left;

Или вы можете индивидуально указать верхнее и нижнее поля:

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

Итак, у вас может быть класс вроде этого:

.bord { margin-bottom: 30px; }

и добавьте этот класс к каждому элементу, у которого вы хотите иметь нижний край 30px:

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

Ответ 5

Вы можете попробовать его по стандарту CSS:

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

Более подробную информацию можно найти здесь: http://www.w3.org/TR/CSS2/selector.html#child-selectors

Ответ 6

Я удивлен качеством ответов на этот пост, несмотря на то, что некоторые старые.

Следующий CSS будет хорошо работать

div > *:not(:last-child) {
    display: block;
    margin-bottom: 30px; 
} 

> выбирает все элементы, которые являются прямыми дочерними элементами div (таким образом, у вас не возникает странных проблем с внутренним пространством), и добавляет нижнее поле ко всем, которые не являются последними дочерними, используя :not(:last-child) (так вы не получите конечный пробел).

display: block гарантирует, что все элементы отображаются в виде блоков (занимающих свои собственные строки), что по умолчанию не является img.

Ответ 7

Surest way - добавить класс ко всем внутренним элементам, за исключением последнего.

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

Таким образом, дополнительные элементы можно просто пометить классом. Помните, что вы можете использовать элементы многоклассового стиля, разделяя их внутри значения класса в теге с пробелами, например:

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

Наконец, вы можете динамически присоединять классы с помощью Javascript (код сверху, не проверен, не проверен на работоспособность или обработка ошибок, ymmv и т.д.):

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