该行顶部和底部有更多空白

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.