Я изо всех сил пытаюсь определить, где в моем CSS должны быть отступы/поля, чтобы сохранить разделение между родительскими и дочерними контейнерами. Например, если у вас есть родитель div с двумя вложенными дочерними элементами, и вам нужно иметь ровный интервал 10px между дочерними элементами, а также иметь дочерние элементы на расстоянии 10px от родителя; тогда бы вы добавили отступ к родительскому div {padding:10px}, а затем просто добавили бы 10px отступа между дочерними элементами? Или вы бы оставили родителя в 0 дополнении, а дети определили бы, какое разделение им нужно друг от друга, а также от своих родителей?
Вот исходная скрипта, показывающая оба примера, и фрагмент, показывающий то же самое
.parent1 { /*spaces itself from its children*/
display: inline-block;
padding: 10px;
font-size: 0;
border: 1px solid red;
}
.child1 {
display: inline-block;
margin-right: 10px;
font-size: 12pt;
border: 1px solid blue;
}
.child2 {
display: inline-block;
font-size: 12pt;
border: 1px solid green;
}
.parent2 { /*has not spacing from its children*/
display: inline-block;
font-size: 0;
border: 1px solid red;
}
.child3 {
display: inline-block;
margin: 10px;
font-size: 12pt;
border: 1px solid blue;
}
.child4 {
display: inline-block;
margin-right: 10px;
font-size: 12pt;
border: 1px solid green;
}<div class="parent1">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
<br/>
<br/>
<div class="parent2">
<div class="child3">child3</div>
<div class="child4">child4</div>
</div>