Member Avatar for samson.oba.77

Since i want to develop responsive websites i usually neglect px and use % for dimensions. But i discovered that some cases % doesnt work so i use em instead.
Why is it that in some cases % doesnt work but em does ?
Thx for help

  • 3 Contributors
  • 2 Replies
  • 359 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

Short answer: percent is always computed relative to some other dimension (the “containing block” or parent font-size), so when that reference is not a definite value the percent appears to “not work.” em is font-relative and often gives a visible change because it resolves from an explicit font-size nearby.

Common gotchas and fixes

  • Percentage heights need a definite ancestor height. If height up the chain is auto, height: 50% on a child can’t be resolved. Make an ancestor definite (for example, set html/body or the immediate parent to a fixed or 100% height) so the child percent can compute:
html, body { height: 100%; }
.wrapper   { height: 600px; } /* or 100% if ancestor set */
.child     { height: 50%; }   /* now resolves */
  • Vertical padding/margin in percent is calculated from the containing block’s width (surprising to many).
  • Widths won’t apply if the element is display: inline (use block/inline-block).
  • Absolutely positioned children use the nearest positioned ancestor as the reference — if you expect a parent to be the reference, ensure it’s position: relative (or otherwise positioned).
  • Flex and grid can change how sizing behaves (flex-basis, auto sizes, and item growth/shrink can override a simple percent).

em vs rem behavior
em compounds through nesting; that can be useful or surprising:

html { font-size: 16px; }
.parent { font-size: 1.25em; } /* 20px */
.child  { font-size: 1.25em; } /* 25px (1.25 * 20px) */

rem reads from the root and avoids that compounding, so use it when you want consistent global scaling.

Quick debug checklist

  1. Inspect computed styles in DevTools.
  2. Confirm the containing block and whether the ancestor has a definite dimension.
  3. Check display and positioning.
  4. Consider rem for predictable type scaling, em for local adjustments, and combine units with calc() when needed.

Thanks to for the reference and for the box-sizing reminder — those suggestions pair well with the fixes above.

Recommended Answers

All 2 Replies

Member Avatar for gentlemedia

In responsive websites normally we would use % for layout dimensions and em (or even rem units depending on your targeted browsers) for the fontsizes. em or rem is handy bacause it's easy to scale down or bump up fontsizes in elements relative to their parent(s). It's also recommended to set your media querries in em's instead of px.
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

One of the best things to use in responsive web design is putting the following in your CSS reset.

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

This will override the default CSS box-modal (box-sizing: content-box) in the browsers, so that borders and paddings are calculated inside all elements instead of outside. This was for me really a life saver in RWD.

If you had 3 elements in a row equally set to 33.3333333333% width and you wanted a 1px border around them, then this would force the 3rd element to drop to the next line, but with box-sizing: border-box; you don't have this problem and will save you a lot of math and trouble.

Edited by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.