My website predominantly utilizes "em" for design over "px," which is meant to be more compatible with modern browsers.
Most of the text is set at font-size:1em, where 1em equals 16px as a default without specific specification.
However, there are sections with different font sizes like 1.2em and 0.8em (e.g., for H1 or small buttons).
The challenge with using "em" is that it adjusts all element sizes (margin, padding, height, etc.) based on the font size.
In my CSS, I have defined:
/* Reset */
html [along with other elements] {
font-size: 100%;
font: inherit;
}
/* Design */
body {
font-size: 1em;
line-height: 1;
}
.small-button {
font-size: 0.8em;
margin-left: 1em;
}
.normal-button {
font-size: 1em;
margin-left: 1em;
}
The normal button has a margin of 1x1x16 = 16px, while the small button has a margin of 1x0.8x16 = 12.8px.
This discrepancy occurs due to an inherent property of "em" that scales everything based on the element's font size.
While this example seems straightforward, it poses challenges in maintaining consistency across my site.
Is there a way to disable this scaling property so that both buttons in the example above have the same margin without manual adjustments?