I have some <h1> and <p> tags with text content. I'd like the top of the text (cap height) and the bottom of the text (baseline) to be flush with the tag's bounding block. By default there seems to be a certain amount of spacing and I don't know why. Is there a calculation to determine this spacing?
I can achieve what I'm after if I modify the line-height and the height properties of the element, but then the original and desirable line-height for multi-line text overlaps and isn't what we want.
Ex. Right-click a <p> tag on this page and hover the element in the dev console to notice that the top/bottom of the text isn't flush with the bounds of the actual <p> element.
- Is it possible to make the cap height and baseline flush with and element's bounds?
- Is this spacing possible to edit in CSS?
- Is there a rule/calculation that determines what this spacing is?
you want to use something called css reset block
http://html5doctor.com/html-5-reset-stylesheet/
and also if your container is a div
use display:inline; to wrap exactly onto the element inside.
来源：https://stackoverflow.com/questions/25671545/css-is-it-possible-to-shrink-wrap-a-bounding-block-to-a-fonts-cap-and-basel