CSS width and height

Updated

Define the size of an element, set minimum and maximum width and height values, and hide content that overflows element boundaries.

In responsive web design, width and height properties are sized based on the content inside, but can be more specifically defined using pixels (px), percentages (%), ems, rems, viewport width (vw), viewport height (vh), viewport minimum and maximum (vmin and vmax), fractional units (fr), and character units (ch).

In this lesson, we’ll cover each of these units, as well as minimum and maximum values, overflow, and object-fit. 

Automatic sizing

By default, web elements are automatically sized based on what’s inside them. 

Pixels

Pixel values can scale proportionately with images and other elements that have an assigned pixel value. 

To use the default pixel value:

  1. Type a numeric value
  2. Press Enter

Percentages 

Like ems, percentage refers to the parent element's font size. If you have padding on a section and set your width to 25%, it will take up 25% of the space inside the element. 

Ems

Ems are practical when you  want to set proportional padding on an element with text. Every browser has a default font size, which is usually 16px. Ems look to their parent element and scale the font size proportionally.

If a font is 16 pixels:

  • 1 em is 16 pixels 
  • 2 ems 32 pixels
  • 1.5 ems Is 24 pixels

You can also set the font size on a paragraph’s parent element, like a Div block:

  1. Select the parent element 
  2. Change the font size (e.g. to 20 pixels) in the Style panel under Typography

When the parent element is 20 pixels:

  • 1 em is now 20 pixels
  • 2 ems is 40 pixels
  • 3 ems — 60 pixels

Rems

Rems are relative to the HTML font size.

A rem is calculated by taking your rem value and multiplying it by the HTML font size (which respects the browser’s font size unless you manually change it in the code). This has the benefit of respecting a user’s browser preferences (if custom text size is set on the browser).

Rems look to the root (root ems) — they look to the HTML tag, which respects the browser’s default font size unless you change it. (Rems ignore font set on the element, or the element’s parent, and scale based on the font size of a browser.)

Viewport-based units

VW is a measurement of the width of the browser’s viewport that scales proportionally based on the width of the viewport.

Fractional units

Fractional units (fr) work inside anything that’s set to the grid display property, including the Quick Stack element.

If you have a 4-column grid, each column defaults to 1fr — 1 fr is equal to 1/4th of the grid. If you add a column, each fr is equal to 1/5th. You can change these values (e.g., set the first column to 2fr). Fractional units automatically scale things — everything is automatically calculated, including column gaps.

Learn more about fractional units.

Character units

CH is great for sizing something like a paragraph or a heading to limit the number of characters someone has to read per line. 

For example, If a paragraph has a maximum width of 60ch, it takes the selected font (the paragraph’s typeface), and sets the paragraph’s boundary (its box) to equal the width of 60 zeros.

CH lets you set the width on a text element when you’re trying to limit the number of characters (based on the width of the font’s zero character.)

Minimum & maximum dimensions

If you set the width of an element to be 50%, it takes up 50% of the space inside its parent element (the Section). As you resize the viewport, the element scales accordingly. 

If you set a minimum (e.g., 200px) and a maximum (e.g., 500px) width on an element, it remains 50% wide and stays within the minimum (200 pixels) and maximum (500px) width the viewport shrinks and expands. 

A common design pattern is to set up a full-height section (e.g., a height of 100vh). This isn’t a problem until a browser gets shorter and elements begin to overflow or clip off at the bottom (which doesn’t look too great). 

Pro tip

Use minimums to remove any explicit height from a section, and instead set the minimum height to 100vh. Now your section won’t get shorter than 100% of the viewport height.

If you want to set a section height at 800 pixels, setting it as minimum height means it’ll be 800 pixels tall while respecting the width of its content (it can get taller if it needs to).

Say you never want a paragraph to go more than 60-ish characters wide, you can select any paragraph, click into the All Paragraphs tag and set a maximum width (e.g., 60ch). Now your default, unless you override it, will self-limit paragraphs at 60 characters (60 zeroes in whatever the typeface is).

Aspect ratio

Aspect ratio provides predefined and custom aspect ratios to size any elements in your site. This is useful for images, videos, and grid layouts, which typically use a ratio for sizing.

 There are 5 ratio settings:

  • Auto — does not constrain dimensions. This is ideal for layouts that require varying widths and heights
  • Anamorphic (2.39:1) — ideal for cinematic experiences requiring ultra-wide dimensions. Suitable for film trailers or high-quality video content.
  • Univisium/Netflix (2:1) — ideal for modern TV and streaming content that uses a 2:1 aspect ratio. Great for featured video sections.
  • Widescreen (16:9) — ideal for elements that require wide layouts (e.g., banners, videos, responsive layouts, etc.)
  • Landscape (3:2) — ideal for web elements that benefit from a slightly-taller layout than widescreen.
  • Portrait (2:3) — ideal for elements in tall layouts (e.g., mobile layouts, column layouts, etc.)
  • Square (1:1) — ideal for elements in a balanced layout (e.g., profile images, grid layouts, etc.)
  • Custom — allows you to specify a custom ratio. You can set custom values in the width and height fields

If you’ve already set other sizing properties on elements (width, height, max height, min height, etc.), the ratio property will respect these properties. For instance, if you set a height of 200px on an image, then apply a standard ratio to it, the image’s width will be 150px. If you set both width and height values on an element, then apply a ratio, your predefined width and height values will take precedence over the ratio.

To ensure your element maintains the ratio regardless of the content inside, you can set Overflow to hidden.

Note

If you’ve already set image proportions and want to define a ratio, set Fit to cover. This will ensure that your image scales properly.

Note

Elements sized using aspect ratio may appear differently on mobile portrait device sizes. This is because the device screen width may not match the ratio’s proportional height. We recommend you adjust the Ratio values or other sizing settings on breakpoints to achieve your desired layout. For instance, you could set a widescreen aspect ratio on an image on larger breakpoints and set a square aspect ratio on the same image on mobile breakpoints.

Box sizing

Box sizing determines how an element’s padding and border influence its size. By default, the box sizing property is set to border-box for all elements in Webflow. This is typically the desired behavior for predictably-sized elements, but you may want to choose a different option when styling a media element that has a border.

The options for box sizing are:

  • Border-box — the element’s specified width and height includes the content, padding, and border. The overall dimensions of the box do not increase regardless of padding and border sizes.
  • Content-box — the element’s specified width and height includes only the content. Padding and border sizes are added to the outside of the box’s dimensions.

Overflow 

Overflow happens automatically when there’s a width and height set on an element and not enough room for the content inside. By default, text that overflows is visible. If you select your element, click into the Style panel > Size > Overflow, you’ll see the first icon, the visible (eye) icon, is selected by default, which means that the text that overflows defaults to visible. 

Other options for overflow are:

  • Hide hides content outside the boundary of an element.
  • Clip also hides content outside the boundary of an element. There are some subtle differences between hide and clip; these make clip a better option if the element’s position is set to sticky.
  • Scroll, depending on someone’s operating system and browser, it can display a scroll bar so people can scroll through the contents of a Div block. 
  • Auto allows people to scroll (only do this if there’s enough content to overflow in the first place)

Object fit 

To use object fit, head to the Size section in the Style panel:

  1. Set a width and a height on the parent element (e.g., the Div block)
  2. Set a width and a height of 100% on the on the child element (e.g., your image inside the Div block)
  3. Test the fit properties: fill, contain, cover, none, and scale down — choose the best option for your project

Note

Make sure parent elements have a width and a height when working with object fit. This is because all object fit options fit content inside a parent element, but object fit is set on the child of a parent.