Row having more white space at top and bottom - html

Question

I am having problem with the bootstrap rows, where I am getting more white space at top and bottom of the rows, which I need to remove, I want the row to have just the height of the text present inside it...
HTML is given below :
<div class="row">
<div class="col-sm-6 text-muted">
<p>Author</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>abcd</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>Date Created</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Nov 28, 19:30</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>File Type</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Microsoft Word</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>Last Modified</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Dec 08, 11:00</p>
</div>
</div>

Answer 1

All you need to do is add the following CSS to your code:
.row-divider {
height: 1px;
margin: 0px;
overflow: hidden;
background-color: #e7eaec;
}
p {
margin: 0;
padding: 0;
line-height: 1;
}
You basically tell all your paragraphs to have 0 margins so the line height is equal to the text height.
On a different note, you might want to use text-muted class on the <p> tags instead of the whole <div> that contains those <p> tags. Why? because for example tomorrow you will add two more lines to that div that wouldn't need to be text-muted, you would need to define a new class to cancel those values.
Style the things you need and only those.
If you want the left text and right text on the same line in Jsfiddle just change the col-sm-x class to col-xs-x class, basically, jsfiddle view is a bit small and that's why you see two lines.

Answer 2

You have to set:
p{
margin: 0;
line-height: 14px; /*you can reduce this value to achieve what you want*/
}
Here a JSFiddle example to play with
Note that .row-divider has margin: 9px 0px if you want you can reduce it to closer to the text above it.
Check this out for more information about line-height http://www.w3schools.com/cssref/pr_dim_line-height.asp

Answer 3

p{
margin: 5px 0px;
}
.clearfix {
zoom: 1;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
use clearfix class with row.