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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With