If you know the exact text that appears in the content (and it will never change) and if you rely on the specific font to be always available (which is very probable, but not certain, for the Arial font), then you can run some experiments and iterate until you find a suitable line-height value. And any padding that you set adds to that. Even for line-height smaller than 1 (i.e., with “negative leading”), there can be some spacing. When line-height is larger than 1, there is additional spacing below and above. For example, in Arial, there is space below and above an ordinary uppercase letter like “H” even when text is set solid ( line-height: 1). The basic spacing below and above a character (glyph) is defined by the font designer. What is the best approach here to accomplish the pixel perfect design conversion? But then, it'll mess up if the text includes multiple lines. So, to get 10px of space between the text and the border I need to change my code to: padding-bottom: 1px Ī solution to this might be adding a line-height property with amount of the text's exact height in the design file. When I take my time and measure the space under the letters that's being caused by line height, I can see it's a 9px of empty area. Here's an inspected screenshot on Chrome: Here is a screenshot of it in action in Chrome:īecause of the line height, there's extra space between the text and the border. Technically, this code should give me exactly what I want. I'm trying to replicate this with the following code: font: normal 40px arial There is a 10px space between the bottom of the letters and the red line. Here is a screenshot of the example design I made up:
0 Comments
Leave a Reply. |