CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Alexander Solonik
Alexander Solonik

Reputation: 10240

What is the reason for a line height of 1.33333 on Bootstrap btn-lg?

The bootstrap .btn class has the following styles: 

display: inline-block;
padding: 6px 12px;
margin-bottom: 0px;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;

When I use btn-lg a class to increase the button size, the following styles are applied:

.btn-lg, .btn-group-lg > .btn {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33333;
    border-radius: 6px;
}

Of course .btn-lg overrides a few properties of .btn most noticeably, the padding and the line-height. Adding padding makes the button look bigger obviously. But here is what interests me: the line height. Why is the line-height reduced to 1.33333. I take keen interest in website layouts and so I ask this question. Obviously your answer could be "it's a design decision".

But I don't just think they put that number there randomly. I think it's some careful math, so could just somebody demystify this for me? I mean what math lead to the Bootstrap developers to add a line height of line-height: 1.33333; to btn-lg and that would be my only question.

Upvotes: 4

Views: 1347

Answers (1)

Stéphane Bruckert
Stéphane Bruckert

Reputation: 22933

The 1.33333 value with 5 decimals is needed to fix the #15497 Bootstrap issue which happened on Win 8.1 with Chrome. It appears that 1.33 was just not precise enough to represent 4/3.

In this way, 1.33 has been changed in multiple files: https://github.com/twbs/bootstrap/commit/4ed95f5fa298d861c5fa53ae2a3a0dcb4901bd69

The reason why 1.33 is enough in most cases but not with Win 8.1/Chrome is explained by patrickhlauke:

it seems the culprit may be the line height of 23.94xxx leading to some rounding issue in chrome. left button is 24px tall, while right one only 23px for some reason...

Upvotes: 5

Related Questions