One place for hosting & domains

      CSS Units Explained


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      Introduction

      CSS has several options for which units to use when determining the size of various CSS properties. Learning all your options for CSS units can be key for styling in a way that’s easy to manage and looks great on any screen.

      What is a CSS Unit?

      A CSS unit determines the size of a property you’re setting for an element or its content. For example, if you wanted to set the property margin of a paragraph, you would give it a specific value. This value includes the CSS unit.

      Let’s look at a small example:

      p {
        margin: 20px;
      }
      

      In this case, margin is the property, 20px; is the value, and px (or “pixel”) is the CSS unit.

      Even though it’s common to see units like px used, the big question is often, “What’s the best unit to use here?”

      Here are some considerations to make when picking a unit type, and example use cases:


      Absolute vs. Relative Units

      When considering all the options for which units to use, it’s important to consider the two categories of units: absolute and relative.

      Absolute Units

      Units that are “absolute” are the same size regardless of the parent element or window size. This means a property set with a value that has an absolute unit will be that size when looked at on a phone or on a large monitor (and everything in between!)

      Absolute units can be useful when working on a project where responsiveness is not being considered. For example, desktop apps that can’t be resized can be styled for the default dimensions. If the window doesn’t scale, you don’t need the content to either.

      Hint: Absolute units can be less favourable for responsive sites because they don’t scale when the screen size changes.

      Absolute Unit Description Example
      px 1/96 of 1 inch (96px = 1 inch) font-size: 12px;
      pt 1/72 of 1 inch (72pt = 1 inch) font-size: 12pt;
      pc 12pt = 1pc font-size: 1.2pc;
      cm centimeter font-size: 0.6cm;
      mm millimeter (10 mm = 1 cm) font-size: 4mm;
      in inches font-size: 0.2in;

      Pixels (px) are typically the most popular absolute unit for screens. Centimeters, millimeters, and inches are more common for print and you may not have even known they were options!


      Relative Units

      Relative units are useful for styling responsive sites because they scale relative to the parent or window size (depending on the unit).

      As a general rule, relative units can be used as the default for responsive sites. This can help you avoid having to update styles for different screen sizes.

      Relative units can be a little more difficult than absolute units in determining which to use, so let’s go through your options in detail.

      Relative Unit Description
      % Relative to the parent element’s value for that property
      em Relative to the current font-size of the element
      rem Relative to the font-size of the root (e.g. the <html> element). “rem” = “root em”
      ch Number of characters (1 character is equal to the width of the current font’s 0/zero)
      vh Relative to the height of the viewport (window or app size). 1vh = 1/100 of the viewport’s height
      vw Relative to the width of viewport. 1vw = 1/100 of the viewport’s width.
      vmin Relative to viewport’s smaller dimension (e.g. for portrait orientation, the width is smaller than the height so it’s relative to the width). 1vmin = 1/100 of viewport’s smaller dimension.
      vmax Relative to viewport’s larger dimension (e.g. height for portrait orientation). 1vmax = 1/100 of viewport’s larger dimension.
      ex Relative to height of the current font’s lowercase “x”.

      It’s not always clear which of these options is best to use for each type of CSS property. For example, % is usually more appropriate for layout-related properties like width than it would be for font-size.

      Here are some examples of when you would use each relative unit.

      • %: You want a child element to have 10% of the parent’s width as a margin so it never fills the whole parent element. If the parent’s size changes, the margin will update too.

        .child {
          margin: 10%;
        }
        
      • em: You want the font of a child element to be half the size of its parent’s font-size (e.g. the paragraph under a section’s title).

        .child {
          font-size: 0.5em;
        }
        
      • rem: The font-size should be twice the size as the root element’s font. This could be how you size your headers because they should all be the same size regardless of the parent container.

        .header {
          font-size: 2rem;
        }
        
      • ch: You have a mono-spaced font (the characters are always the same width) and you only have space for 10 characters.

        .small-text {
          width: 10ch;
        }
        
      • vh: Your landing page should always be the height of the viewport/window.

        .wrapper {
          height: 100vh;
        }
        
      • vw: You have a section with text that should be half as wide as the viewport/window.

        .half-size {
          width: 50vw;
        }
        
      • vmin: You have an image that should always be as wide as the viewport’s smaller dimension. On a phone being held in portrait mode, the image will be as wide as the viewport’s width.

        .min-width {
          width: 100vmin;
        }
        
      • vmax: You don’t care if an image gets cut off because you want it to completely fill the larger dimension of the viewport. For example, if an image of a pattern is used as a background.

        .max-width {
          width: 100vmax;
        }
        
      • ex: You probably won’t come across ex very often but it’s generally a good measure of a font’s mid-section. Let’s say you want to a font’s line-height to be double the height of the font’s “x”.

        .double-x {
          line-height: 2ex;
        }
        

      Overall, when and how you choose your CSS units will come down to a couple questions:

      • Do I want what I’m styling to scale when the viewport size changes?
      • If I do want it to scale, what do I want it to scale relative to in the app?

      Once you’ve answered these questions, it’s a lot easier to nail down which unit to use. 💪

      Further Reading

      You can dig deeper into viewport units by reading this article, or have a look at this article about em vs rem units if the difference between those two units is still somewhat unclear.



      Source link

      rem vs em Units in CSS


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      Introduction

      We have many good choices when it comes to units in CSS. In today’s world of responsive designs, relative units like the em or rem units give us adaptability and flexibility right out of the box that allows for sizes to be based on the font-size(s) defined higher-up in the markup.

      You’ve probably been using em and rem units now for a while already, but you might be wondering about the exact difference between the two and which unit is better suited for your use cases. Let’s break it down as briefly as possible.

      Summary: em units for the font-size property will be relative to the font-size of the parent element. em units on other properties than font-size will be relative to the font-size of the current element. rem units sizes will always be relative to the font-size of the root html element.

      em Unit

      em is borrowed from the typography world, and it’s a unit that allows setting the font-size of an element relative to the font-size of its parent.

      Let’s take this simple example:

      .parent {
        font-size: 18px;
      }
      .child {
        font-size: 1.5em;
      }
      

      With that example, the child would have a font-size of 27px (1.5 * 18px = 27px).

      If the parent element doesn’t specify a value for font-size, a value will be looked for higher up in the DOM tree. If no font-size is specified all the way up to the root element (<html>), then the browser default of 16px is used.


      Pretty simple and straight-forward right? em units can be used for much more than just setting font-size however, and they can be used pretty much everywhere units are expected (padding, margin, width, height, max-width,…you get the picture!) When em units are used on other properties than font-size, the value is relative to the element’s own font-size.

      Let’s add to our example:

      .parent {
        font-size: 18px;
      }
      .child {
        font-size: 1.5em;
        padding: 2em 1em;
      }
      
      • The padding top and bottom on .child will be 54px. That’s 2 times the font-size of our current element’s font size (2 * 27px)
      • The padding left and right on .child will be of 27px. That’s 1 time the font-size of our element.

      Remember: when em units are used on font-size, the size is relative to the font-size of the parent. When used on other properties, it’s relative to the font-size of the element itself.


      Compounding Effect: Trouble in Paradise

      So far everything is well and good with using the em unit, but a problem can come about from the fact that the unit can compound from one level to the other.

      Let’s keep a similar basic example:

      .parent {
        font-size: 15px;
      }
      .child {
        font-size: 2em;
      }
      

      But let’s use it in our markup like this:

      <div class="parent">
        I'm 15px
        <div class="child">
        I'm 30px, as expected
          <div class="child">
          I'm 60px, trouble starts!
            <div class="child">
            I'm 120px, now we're really in trouble!
            </div>
          </div>
        </div>
      </div>
      
      I’m 15px

      I’m 30px, as expected

      I’m 60px, trouble starts!

      I’m 120px, now we’re really in trouble!

      So, as you can see, the effect of em units can be compounding when multiple em-font-sized elements are within one another. This can become a problem and can lead to unintended consequences in your designs.

      This problem is the reason why the rem unit was created.

      rem Unit

      The rem unit, short for root em is a relative unit that’ll always be based upon the font-size value of the root element, which is the <html> element. And if the <html> element doesn’t have a specified font-size, the browser default of 16px is used.

      So that means that, by using the rem unit, the values of parent elements are ignored, and only the value of the root is taken into consideration.

      With a similar example, but in rem:

      .html {
        font-size: 16px;
      }
      .parent {
        font-size: 15px;
      }
      .child-rem {
        font-size: 2rem;
      }
      
      <div class="parent">
        I'm 15px
        <div class="child-rem">
        I'm 32px, as expected
          <div class="child-rem">
          I'm 32px, yep!
            <div class="child-rem">
            I'm 32px, like clockwork!
            </div>
          </div>
        </div>
      </div>
      
      I’m 15px

      I’m 32px, as expected

      I’m 32px, yep!

      I’m 32px, like clockwork!


      As you can see, using rem units allow us to avoid the compounding effect of em units. With rem things are always and consistently based on the font-size or the root element, so there are no surprises.

      The same goes for other values than font-size (margin, padding,…) Using rem units on those will still be relative to the font-size of the root element.

      em vs rem, Which is Better?

      There’s no better unit really, and it all depends on your personal preferences. Some people like to design everything in rem units for consistency and predictability, while others like to also use em units in places where the influence of nearby parent elements would make sense.



      Source link