Css inherit font size
![css inherit font size css inherit font size](http://i.stack.imgur.com/sm799.png)
![css inherit font size css inherit font size](http://vietnamese.spotaircooler.com/photo/pc19030051-2_5_ton_air_conditioner_portable_cooling_system_keeping_30sqm_large_area.jpg)
The rem unit is relative to the html (root) element. It is a relative unit and not dependent on parent elements.
![css inherit font size css inherit font size](https://i.stack.imgur.com/2dS7i.jpg)
Moreover, if you want to apply a specific font-size to child element, you cannot do that using em. The main problem with em is that you need to do all mathematical calculation of font-size of child elements as we did. Here is an interesting post which explains why em should be used for media queries. The em should be used to define screen width in media queries. The #another_subsubmenu item class and font-size is not defined so font-size in pixel would be same as its parent #submenu i.e.The #subsubmenu item font-size: 0.5em is relative to the #submenu so font-size in pixel would be 25x0.5 = 12.5px.The #submenu item font-size: 0.5em is relative to the #menu so font-size in pixel would be 50x0.5 = 25px.
If a font-size has not been set on any of the's ancestors, then 1em will equal the default browser font-size, which is usually 16px.By extension, a font-size of 1em equals the computed font-size of the element on which it is used.
• The #menu item font-size: 0.5em is relative to the #container so font-size in pixel would be 100x0.5 = 50px In this case, the font size ofelements will be double the computed font-size inherited by
elements.
Let’s break down how browser is calculating the the pixel (px) from rem relative values. We see that font-size is reducing as we go to the nested levels of menu structure even though we have applied the same CSS class. We can use the em where you want to apply font-size relative to the parent element such as menu structure. Default font-size of the root element is provided by browser. The inheritance continues to take place this way amongst ancestors up until the root element. If font-size is not defined explicitly, that element will inherit it from the parent element. The em unit is relative to its direct or nearest parent element. Say, if browser’s default font-size is 16px, then 1em = 16px Both em and rem are translated by the browser into pixel (px) values, depending on the default font-size setting of the browser. The em and rem are the relative (or flexible) units as oppose to px, which is an absolute (or fixed) unit. Pixel px is still a good choice for fixed layout measurement and fixed spacing (padding, margin, etc.) but not a good choice for flexible layouts and font-size measurement. User preference is not reflected which is not considered as a good user experience. In that case p (paragraph) element with above CSS will still be displayed as font-size: 12px since its an absolute value. The problem arises, when user changes the default font-size of the browser say they want to see bigger font-size. Although the size of a pixel isn’t always the same across devices and screens, means the actual width of the block having width: 120px on laptop is not same as on iPad.