I have tried a lot things but not able to get desired format.HTML:\[code\]<div class="usertype"> <div class="type1"> <span class="type-heading">type1 is here</span> <span class="type-description">10 types have joined</span> <span class="type-description">35 type will.</span> </div> <div class="type2"> <span class="type-heading">type2 is here</span> <span class="type-description">10 types are there</span> <span class="type-description">35 type will.</span> </div> <div class="type1"> <span class="type-heading">type23 is good</span> <span class="type-description">50 types are there</span> <span class="type-description">50 types are there</span> <span class="type-description">for 2 months</span> </div> <div class="type2"> <span class="type-heading">Type4 at last</span> <span class="type-description">50 types are there</span> <span class="type-description">makes their first $20</span> <span class="type-description">50 types are there</span> <span class="type-description">35 type will.</span> </div> </div>\[/code\]CSS:\[code\]div.usertype { margin-top: 1em;}div.type1 { float: left; margin-left: 2em;}span.type-heading { font-size: 14px; color: #f7f7f7;}span.type-description { font-size: 14px; color:#959595; display: block;}\[/code\]Output:
What I want:[*]Decrease the vertical distance between spans with class \[code\]type-description\[/code\]. I tried using \[code\]line-height\[/code\] and \[code\]padding-bottom\[/code\] but could not move it. May be some parent div has \[code\]display:block\[/code\].[*]All type description aligned to left which are now center. If I use it \[code\]float: left\[/code\], it ruins the format completely.Please help.