Учитывая схлопывание полей, как равномерно распределить дочерние элементы внутри родительского элемента?

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

-------------
|           | <-- "Top space"
|  -------  |
|  |     |  |
|  |     |  |
|  -------  |
|           | <-- "Middle space"
|  -------  |
|  |     |  |
|  |     |  |
|  -------  |
|           | <-- "Middle space"
|  -------  |
|  |     |  |
|  |     |  |
|  -------  |
|           | <-- "Bottom space"
-------------
 ^        ^
left     right
space    space

Я хочу, чтобы все эти «пространства» были равны.

Я хочу, чтобы расстояние между каждым дочерним элементом было 10px, а расстояние между дочерними элементами и родителем - 10px. Если у меня есть поле 10px для каждого дочернего элемента и нет заполнения для родителя, «верхнее пространство» и «нижнее пространство» будут 0px. Если у меня есть какие-либо отступы в родительском элементе, «среднее пространство» будет отличаться от верхнего/нижнего пространства.

Как я могу это сделать? Я не особенно хочу плавать или очищать какие-либо элементы или даже добавлять новые элементы для достижения этой цели. Я просто думаю, что мне здесь не хватает умной математики.


css margin
person Oliver Zheng    schedule 24.02.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Это самый простой способ:

  • Просто добавьте прозрачный border к содержащему элементу.

Текущая демонстрация

HTML:

<div id="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

CSS:

#container {
    background: #ccc;
    width: 200px;
    border: 1px solid transparent /* "magic border" fixes it */
}
.square {
    margin: 10px;
    height: 50px;
    background: #f0f
}

В качестве альтернативы вы можете использовать position: absolute:

Текущая демонстрация

person thirtydot    schedule 24.02.2011
comment
Некоторые веб-сайты говорят, что цвет прозрачной рамки не работает в IE6. Как это вообще выглядит? У меня даже больше нет машины с IE6. - person Oliver Zheng; 25.02.2011
comment
В IE6 это будет черная рамка. Я не рассматриваю IE6 в своих ответах (если только об этом специально не просят), потому что браузер уже устарел. Вы можете проверить это здесь: ipinfo.info/netrenderer — с URL-адресом fiddle.jshell.net/XB9wX/2/show/light - person thirtydot; 25.02.2011
comment
Другое решение — padding: 1px в контейнере: jsfiddle.net/XB9wX/3 У вас есть 3 разных решения сейчас, надеюсь, вы сможете использовать одно из них :) - person thirtydot; 25.02.2011
comment
Я хочу, чтобы мои коробки были идеальными до пикселя! Прозрачная рамка кажется наиболее совместимой с браузерами. Чтобы избавиться от этой разницы в 1 пиксель, я могу сделать 5px отступ для родителя по всему периметру и 5px прозрачную рамку для каждого дочернего элемента. :) - person Oliver Zheng; 25.02.2011

arrow_upward
1
arrow_downward

Вы можете задать дочерним элементам отступ в 10 пикселей, а затем родительский отступ в 10 пикселей. Я закодирую это

РЕДАКТИРОВАТЬ:

  1. Как насчет использования границ? - Нет
  2. родитель - display:table;

HTML:

<div>
    <p>Alex</p>
    <p>James</p>
    <p>thomas</p>
</div>

CSS:

div{display:table;}
p{margin:10px;}

http://jsfiddle.net/nqLYT/1/

person Alex    schedule 24.02.2011
comment
Разве это не дало бы ему расстояние в 20 пикселей между детьми? - person Amir Raminfar; 24.02.2011
comment
Наличие сплошной границы довольно ограничивает. Что, если бы у меня было фоновое изображение в моем родительском элементе? - person Oliver Zheng; 25.02.2011
comment
Согласно quirksmode.org/css/display.html, IE7 не поддерживает display:table. Ну что ж. Спасибо хоть! - person Oliver Zheng; 25.02.2011

arrow_upward
0
arrow_downward

я бы попробовал

.children{
margin: 5px;
}

.parent{
padding: 5px;
}

Это должно быть 10px для всех направлений. Верно?

person Amir Raminfar    schedule 24.02.2011
comment
Нет. Поля дочерних элементов сократятся, и, таким образом, расстояние между каждым дочерним элементом будет равно 5px. - person Oliver Zheng; 25.02.2011