css - Setting body { font-size: 100% } results in font-size: 12px; and not font-size: 16px; Why? -
i understood default font-size 16px on browsers. why height of inline-block(12px) same font-size (i've tried in chrome , ff) ? please me understand. thank you.
<!doctype html> <html> <head> <style> body { font: 100% helvetica, arial, sans-serif; line-height: 1.625; } #temptest { display: inline-block; width: 10px; height: 12px; background-color: orange; } </style> </head> <body> <p class="heading"><span id="temptest"></span>remember, when young, shone sun. shine on crazy diamond</p> </body> </html>
if inspect inline box using browser’s developer tools (hit f12 open them), can see height indeed 12px, set in code. happens because there nothing in require more height; in general, exact calculation of heights of inline blocks browser-dependent.
the font size of text still browser default, typically 16px. font size not mean height of particular letter. fundamental property of font; typographers design characters - ascenders, descenders, , diacritic marks - fit limits set font size (or extend on them little), , letters have smaller height.
Comments
Post a Comment