CSS margin and padding not being applied -

so i've got list of items, separated border. i'd have equal padding , margin applied top , bottom of each item.

here's fiddle contains simplified version of i'm working with.

now, see, have 10px of margin , padding applied top , bottom of each item, items aren't evenly spaced. there's more space above each item below it.

i realize result of css's collapsing margins behaviour, , fix adding more padding margin spacing want.

the issue is, however, items, want highlight adding background colour, fiddle. , when do, padding on top , bottom must same.

so how can fix issue? want super flexible, can customize amount of padding , margin if like, , able remove border still have display properly.

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; }     

here fork of fiddle

---

to achieve correct symetrical, vertical spacing, created 1px div replace border:

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

with myborder class so:

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

the border div placed in between item divs, so:

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

in item class, removed border , margin-bottom attributes:

.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; } 

you symetrical, vertical spacing between items long myborder's margin-top , item's margin-top attributes equal.

---

update: in provided, forked fiddle, created invisible border class, mentioned being able remove border , keep proper spacing:

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

by setting background transparent, becomes invisible; way set height , font-size 0px;