CODEWITHSUNDEEP
csstwitter-bootstrap
kawty
kawty

Reputation: 1656

Height of button grows 1px for smaller font size

I'm using twitter bootstrap to create a button group. When I changed font size of smaller class to 12px (14px by default), the height of the left button grows 1px. How can I avoid it? Checked by Chrome 26, Firefox 20.

<div class="btn-group">
  <button class="btn">
    Foo
    <div class="smaller" style="font-size: 12px;">
      Smaller
    </div>
  </button>
  <button class="btn">
    Bar
  </button>
</div>

Example is available at http://jsfiddle.net/kawachi/xkP9j/

Upvotes: 1

Views: 324

Answers (2)

What have you tried
What have you tried

Reputation: 11148

The problem is the line height. You need to either remove the line-height attribute from .btn or you need to add it to div.smaller to match the font-size

Upvotes: 1

MikeM
MikeM

Reputation: 27405

set the line-height also

http://jsfiddle.net/xkP9j/5/

<div class="smaller" style="font-size: 12px;line-height: 12px;">
   Smaller
</div>

Upvotes: 1

Related Questions