CODEWITHSUNDEEP
htmlcssfonts
Siler
Siler

Reputation: 9484

Resizing/Scaling fonts in inner container

I'd like to be able to increase the default font-size, but only within a certain DIV.

Obviously, this seems like exactly the sort of case that ems were meant for. My problem is I only want to increase the font-size, without affecting other things that are sized with em, like padding and margins.

This might seem like an odd use case, or perhaps I'm just "doing it wrong™". My use case here is essentially as follows:

I have a website that is displaying a chart containing tabular data. The chart can be viewed in two modes, summary mode and full mode. Summary mode shows a smaller version of the chart, with many data omitted. The "full" version shows everything, and takes up almost the width of the browser window.

I'd like to be able to use the same style sheet for both versions. But the "full" version should probably have a larger font-size. However, the "full" version (and just about every module aligned on the left side of the screen) has a certain left padding, which keeps all text aligned the same distance from the left edge of the screen.

If I wrap the "full" version chart in a DIV that simply increases the base em, it will also increase the padding, thus making the data in the chart not left-aligned with everything else on the screen.

So...

  1. What are some solutions to increase the font-size without increasing padding?
  2. Am I "doing this wrong" somehow - is it a mistake to use em units for things like padding or margins?

Upvotes: 0

Views: 34

Answers (1)

sodawillow
sodawillow

Reputation: 13176

Use rem instead of em for paddings for example in your case, as it is not affected by the changes of other elements in the page, as it is based on the root font-size of your page (html if I remember well).

Good reading here : https://j.eremy.net/confused-about-rem-and-em/

Upvotes: 2

Related Questions