Learn
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
andmax-width
. - The minimum and maximum height of elements can be set using
min-height
andmax-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 tocover
.
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.
Sign up to start coding
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.