Как разместить детей в div с css?
Мне нужен пробел в 30px; между всеми детьми моего div. Например, если у меня есть:
<div id="parent">
<img ... />
<p>...</p>
<div>.......</div>
</div>
Я хочу, чтобы все они имели пространство 30 пикселей; между ними. Как я могу сделать это с помощью 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;
}