The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Using width % with em padding

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #192075

    How do I calculate an em padding value when used in conjunction with an arbitrary width which has padding of its own and for which I do not want to overlap?

    For example, I want the second box “em content” to not overlap with its parent container “em container” but then how do I calculate that?

    As you can see from the first example in my pen, its easy enough to do this using percentages, but ems however not so much…


    I’m not that great with em’s myself but I can give you the basic math for the example in your pen. Here goes, max-width: 1000px = 62.5em because 1000px/16px = 62.5 so since you sized the container div to 75% you do 62.5em*0.75 = 46,875em and since you used padding: 1em you do 46,875em - 2em = 44.875em so width: 44.875em; is the answer. Pay attention however the padding isn’t the same for both divs. A base 1em is 16px and 1.6% of the div is 12px since 750px*0.016 = 12px. I hope this helps!

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Other’ is closed to new topics and replies.