Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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 to a text element, does it measure from the baseline of the text or the descender if there are any (ex. g)?
I'm not using a baseline grid but want to make sure my elements are spaced consistently. Any help would be awesome! Thanks.
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.
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.
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.
