Why font-size in body does not affect font in a table unless I add 1em?
css, font-size, fonts, html
Solution
Your page is being rendered in Quirks Mode, probably because it lacks a `doctype` string at the start or starts with a `doctype` string interpreted as nonstandard.
It is part of quirks mode, even in the limited sense of “HTML5 quirks mode” (which tries to standardize some common quirks) that tables no do not inherit font properties. This is being formally defined in HTML 5, in a clause about rendering tables. The definition there uses the `initial` keyword, which isn’t quite standard yet, but it simply means the initial value for a property as defined in CSS specifications. For `font-size`, it is indeed `medium`.
If this is an old page, it is best to live with the quirks and just explicitly declare font properties for tables, e.g. with
body, table { font-size: 14px }
(not that I would ever recommend such inflexibility).
If this is about a new page you are creating, put `<!doctype html>` at the start and use “standard” HTML and CSS consistently.
Problem
``` <style> body { font-size: 14px; } </style> <body> Text outside table. <table> <tr><td>Text inside table.</td></tr> <tr><td>Text inside table.</td></tr> <tr><td>Text inside table.</td></tr> </table> </body> ``` I'm trying to specify base font size for my website so in other places I can use percentage or em to specify the size. The html code above, without `body` style the font will be at the same size. However, why with `font-size` in `body` style like above, only "Text outside table." got affected by the size change? Isn't everything is encapsulated in `<body>` ? I need to add ``` table { font-size: 1em; } ``` In order to make font in my table follow `body`'s font-size. Why this is not the case as with my other `<div>`s in my page? Those `<div>`s did follow `body`'s `font-size` nicely.