CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Blaszard
Blaszard

Reputation: 31985

What's the default line-height in Bootstrap 3? It looks like not 1.428

I use Bootstrap 3 and I put my blog article on my screen. However, the blog looks a bit ugly when I tried to display it, since the line-height seems a bit narrow for some reasons.

Anyway, Bootstrap 3 documentation says it sets the default line-height property to 1.428.

However, when I tried to set my line-height to 135%, with line-height: 135%;, the line-height on my blog looks like expanded... weird.

With a little bit of wrangling, I found that the default line-height on my blog is more like 1.15... I'm not sure where this value comes from - I don't set any line-height in all of my CSS settings.

So I wonder, what makes the default value of Bootstrap 3's line-height changed? I have the <div><div class="blog">, and within the inner div, I put a lot of <p> in order to properly arrange my blog post. Outside of that I don't think I have something related.

So my question is,

  1. What decides the value of line-height?

  2. Why does the Boostrap 3's default line-height, 1.428, is changed?

  3. What is the supposed reason that the about 1.15 value is overwritten (especially it's value - it's not set to 1, but about 1.15...).

I use HTML5 and CSS3 and Bootstrap 3.

[Update]

I found that Bootstrap's line-height is overwritten by my custom CSS setting, specifically this:

body
    font: 16px "Lucida Grande", Helvetica
    text-align: center
    background-color: aliceblue

However, why is the line-height overrode by the above settings? I don't touch on anything related to the line-height property.

For your information my line-height property is set to normal right now. Not sure why it's reverted.

Upvotes: 1

Views: 6877

Answers (2)

ScubaBen
ScubaBen

Reputation: 138

What decides the value of line-height?

If your modifing the line-height with less, it is computed. The default is body {line-height: 1.428571429}; (see CSS file)

The last applied CSS will overwrite the former value. So your the CSS File order should be
bootsrap.css
bootstrap-theme.css (if you have one)
myownstylesheet.css

Upvotes: 1

Blaszard
Blaszard

Reputation: 31985

I finally got what the cause was here. The line of font: 16px "Lucida Grande", Helvetica makes the line-height property reverted to normal, since it sets all the fonts-related settings in one, and since I didn't assign line-height to the property, it assumed the default normal and overwrote the value inherited from Bootstrap. So replace the line with the following snippet resolves the issue:

body
    font-size: 16px
    font-family: "Lucida Grande", Helvetica

Upvotes: 3

Related Questions