Поля CSS и заполнение не применяются

Question

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

Вот fiddle, который содержит упрощенную версию того, с чем я работаю.

Теперь вы видите, что у меня есть 10px из margin и padding, которые применяются к верхней и нижней части каждого элемента, но элементы не равномерно распределены. Над каждым элементом больше места, чем ниже.

Я понимаю, что это, вероятно, результат CSS collapsing margins behaviour, и что я могу исправить его, добавив больше отступов, чем margin, чтобы получить промежуток, который я хочу.

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

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

HTML:

<div class="list"> 
    <div class="item"> 
    <span class="fill">&nbsp;</span> 
    </div> 
    <div class="item"> 
    <span class="fill">&nbsp;</span> 
    </div> 
    <div class="item"> 
    <span class="fill">&nbsp;</span> 
    </div> 
</div> 

CSS:

.item { 
    display: block; 
    width: 150px; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    border-bottom: 1px solid red; 
} 

.fill { 
    background-color: #aaa; 
    display: block; 
    height: 150px; 
} 

.bg { 
    background-color: #ccc; 
}  

Answer 1

Проблема заключается в том, как вы видите вещи. Отступы и поля равны, но вы не можете видеть их таким образом, поскольку у вас есть только нижняя граница. Если вы добавляете верхнюю границу (красный, как нижний), вы можете видеть, что интервал точно совпадает между элементами.

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

Edit: Заменить код CSS следующим, и вы должны добиться того, что вы хотите:

.item { 
display: block; 
width: 150px; 
margin-bottom: 10px; 
padding-bottom: 10px; 
border-bottom: 1px solid red; 
} 

Edit 2: Я просто понял, что из-за вашу подсветку в вашем втором примере, вы будете работать в другое проблема. Таким образом, вам, вероятно, придется вытащить красную линию из div и поместить их в отдельный объект.

Редактировать 3: Вот jsfiddle с обновленным, надеемся, что он сделает то, что вы хотите.

Answer 2

Here is a fork of your fiddle

---

Для достижения правильного симметричная, вертикальное расстояние, я на самом деле создал 1px DIV заменить границу:

<div class="myborder">&nbsp;</div> 

с myborder класса как так:

.myborder { 
    heigth: 1px; 
    background: red; 
    font-size: 1px; 
    margin-top: 10px; 
    width: 150px; 
} 

Граница div находится между разделителями предметов, например:

<div class="item"> 
    <span class="fill">&nbsp;</span> 
</div> 
<div class="myborder">&nbsp;</div> 
<div class="item bg"> 
    <span class="fill">&nbsp;</span> 
</div> 

В классе пункта, я удалил border и margin-bottom атрибутов:

.item { 
    display: block; 
    width: 150px; 
    margin-top: 10px; 
    /*margin-bottom: 10px;*/ 
    padding-bottom: 20px; 
    padding-top: 20px; 
    /*border-bottom: 1px solid red;*/ 
    background-color:yellow; 
} 

Вы получите симметричное, вертикальное расстояние между элементами до тех пор, как margin-top и элементом margin-top атрибутов myborder являются равными.

---

UPDATE: в предоставленной, раздвоенной скрипке, я также создал невидимый класс границы, как вы упомянули в состоянии удалить границу и сохранить надлежащее расстояние:

.myinvisibleborder { 
    height: 1px; 
    background: transparent; 
    font-size: 1px; 
    margin-top: 10px; 
    width: 150px; 
} 

Устанавливая фон прозрачного , он становится невидимым; другим способом было бы установить высоту и размер шрифта на 0px;

Answer 3

Резонанс для проблемы лежит в самой марже. Если вы предоставляете маркер , тогда он займет пустое место от проворного элемента. Теперь, если вы используете косводные средства, косвенно u увеличивают размер div. Вот в вашей проблеме и может решить эту проблему, сделав верхнюю и нижнюю границу 0 и вместо удвоения отступы в классе «.item» следующим образом:

.item { 
    display: block; 
    width: 150px; 
    **margin-top: 0px; 
    margin-bottom: 0px; 
    padding-bottom: 20px; 
    padding-top: 20px;** 
    border-bottom: 1px solid red; 
} 

это будет выглядеть идеально, не прикасаясь к другому коду сегменты!