: In an HTML element, is margin-bottom measured from the baseline? I'm doing an internal style guide for a big company and want to make sure I get the spacing perfect. If I add margin-bottom

@Holmes874

The concept of a text baseline does not really exist in HTML and CSS.

Margin is applied 'outside' the element. An element with text will be (usually) as big as the top of the ascenders down to the bottom of the descenders by default but also may be taller, as it is defined by the bounding 'box' of the individual glyphs in the font, which can be much larger than the actual glyph itself.

As such, don't expect pixel perfection when spec'ing spacing with HTML text.

Vote Up Vote Down

@Nimeshi706

Neither. It's not measured from the descender or the baseline. Margins start from the bottom of the element (including any padding and border) regardless of what text is inside of this. You can see this yourself if you use your developer tools built into your browser (F12 or right click + inspect element).

The only affect that text has on this is the total height, which is in reality set by line-height and the total number of lines, not the text itself.



Demo here

In this image there is both a margin-bottom of 20px on the top div and a margin-top of 20px on the bototm div, but since margins collapse by default the margins combine to form a total of 20px space in between. If you want to disable this behavior you can, but I don't recommend it most of the time.

Vote Up Vote Down