Question

I am using twitter bootstrap in a project and while reviewing the documentation, i ran into a very odd problem – if that can so be called.

On http://twitter.github.com/bootstrap/base-css.html#buttons, there are alot of buttons displayed next to each other. They seem to have spacing, but the computed style (in Firefox and Safari, where i investigated) was the following:

margin-top: 0
margin-right: 0
margin-bottom: 0
margin-left: 0

This should NOT render into a spacing of 10~px between individual buttons.

The padding of 9/14px seems only to be used to display the button-shape.

Now when i use twitter bootstrap on my own projects, the margin that i see from the twitter bootstrap doc site seems not to work locally – buttons are glued to each other with no spacing. This can be rectified with a simple local margin, but i wonder why it differs from the documentation. Also: why does it not show in firebug or the other developer tools?

Answer 1

All the buttons have a property of display:inline-block added to them, display:inline-block is dependent on font-size that is inherited from their container. If you set the font-size on the p tags enclosing the buttons to 0 or remove the html, body and p tags font-size you can see how that space is removed.