To help you better understand how the CSS units of measure work, here are some explanations and examples of how the most commonly used ones work.
Pixels (px) are the most commonly used unit of measure because there are many standards in web design based around the pixel. Just for your own knowledge, a px is 1/96th of an inch. It’s super small, but the point of having this reference is to know exactly how much physical space an element or text will fill. You could design your layout in inches and convert all of the elements to px when writing your code.
When you are using pixels, keep in mind that these CSS units don’t change relative to the size of the screen. 12px is going to look the same regardless of whether it’s on a phone or a laptop. Pixels form the base measurement of websites. The default root size of a web page is set to 16px by all of the popular browsers.
div {
height: 32px;
}
%
Percentages get a lot of use in responsive design and are pretty straightforward. The one thing you have to remember is that the size is relative to the parent element. If you have a
nested in a and you give it a width using the % unit of measure, then the
width will be relative to the size of the