css padding between dynamically generated divs - html

Question

I have a js fiddle where i want a padding between two divs, i have placed a css padding rule on the div that requires padding but it is not being applied:
http://jsfiddle.net/Cnr2V/
css:
.gap {
display: inline-block;
width: 15%;
height: 300px;
float: left;
background-image: url("/images/forward_enabled_hover.png");
background-repeat: no-repeat;
background-position: center center;
}
.feature-addons {
background-color: #303030;
width: 100%;
color: #ffffff;
font-size: 15px;
padding-top: 5px;
padding-bottom: 5px;
}
.feature-container {
display: inline-block;
width: 40%;
float: left;
overflow: hidden;
}
.feature-item {
padding: 5px;
height: 50px;
display: block;
}
.feature-options {
background-color: #f5f5f5;
display: block;
width: 100%;
height: auto;
background-image: url("/images/plus.png");
background-repeat: no-repeat;
background-position: center right;
}
.radio-button {
display: none;
}
html:
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_UpdatePanel_Features">
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_FeatureOptions">
<div class="call-features-table">
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_SelectFeatures" class="feature-container">
<div class="feature-addons">Feature add-ons</div>
<label for="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton_Item" id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Label_FeatureItem">
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_FeatureItem" class="feature-item">
<div class="feature-options">
<h4>Title</h4>
<p>lorum ipsum</p>
<p>lorum ipsum</p> <span class="radio-button"><input id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton_Item" type="radio" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$RadioButton_Item" value="RadioButton_Item" /></span>
</div>
</div>
</label>
<label for="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton_Item" id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Label1">
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel1" class="feature-item">
<div class="feature-options">
<h4>Title</h4>
<p>lorum ipsum</p> <span class="radio-button"><input id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton1" type="radio" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$RadioButton1" value="RadioButton1" /></span>
</div>
</div>
</label>
</div>
<div class="gap"></div>
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_SelectedFeatures" class="feature-container"></div>
</div>
</div>
How can i create the padding required between two feature-item divs?

Answer 1

Remove height from feature-item div.
.feature-item {
padding: 5px;
display: block;
}

Answer 2

You have defined height for feature-item which is not allowing space between the divs. Try removing the height or specify a higher value.

Answer 3

You are applying feature-item class to a div which is already a block element, Removing height will solve your query, but removing extra css will also improve your code quality. So you just need to write :-
.feature-item {
padding: 5px;
}