Review: Relative Measurements

Great work! You learned how to size elements on a website relative to other elements on the page.

Let’s review what you learned:

• Content on a website can be sized relative to other elements on the page using relative measurements.

• The unit of em sizes font relative to the font size of a parent element.

• The unit of rem sizes font relative to the font size of a root element. That root element is the <html> element.

• Percentages are commonly used to size box-model features, like the width, height, padding, or margin of an element.

• When percentages are used to size width and height, child elements will be sized relative to the dimensions of their parent (remember that parent dimensions must first be set).

• Percentages can be used to set padding and margin. Horizontal and vertical padding and margin are set relative to the width of a parent element.

• The minimum and maximum width of elements can be set using min-width and max-width.

• The minimum and maximum height of elements can be set using min-height and max-height.

• When the height of an image or video is set, then its width can be set to auto so that the media scales proportionally. Reversing these two properties and values will also achieve the same result.

• A background image of an HTML element will scale proportionally when its background-size property is set to cover.

Relative units of measurement are a first step towards incorporating responsive design in a website. When combined with more advanced responsive techniques, you can create a seamless user experience regardless of a device’s screen size.

Instructions

Take some time to experiment with your new knowledge of relative measurements in style.css. When you’re done, proceed to the next unit.