Got an interesting one. We sometimes have issues communicating with developers what padding should be on elements, recently we’ve realised that this may be down to the way designers measure things vs how developers do.
As designers, we have always measured from the text cap height or baseline when creating our designs. For example we’ll create a pod and make a mental note that our padding rule is 30 pixels for example. Like the graphic on the left.
But obviously in HTML, line-height is taken into account, so the padding for the above pod would actually look like the graphic on the right.
It also means that the padding for this pod would be different if there is different content. For example, if body copy or a button is added instead of a heading, the body copy would have a different line-height and the button would have no line-height at all.
Interested to see how people tackle this issue? Is there anything we can do to alleviate this issue? Should we just adopt the practice of measuring from bounding boxes too when creating our designs for simplicity?
Thanks!