CSS Width & Height
By Tony
6.12.2024
One of the most important aspects of web design and CSS is the sizing of the elements. The width, height, and white space helps a lot when creating websites that look simple and good and have great readability. Today, we'll learn how to change the width and height of an element using CSS.
width: 100px;
height: 100px;
First up, we have the "width" CSS property that tells the browser how wide the element is. Here, that value is 100px, which means 100 pixels. "px" is a fixed amount of unit when you're measuring length in CSS and is very commonly used. To change the height of the element, use the "height" CSS property, which tells the browser how tall the element is. Here, we also used the "px" unit so the width and the height of the element are the same. Here's the result (we added a background to visualize):
As you see in the example above, the element's size changes with the width & height properties. They can be used without each other but most of the time they're used together to set the size. If you don't set anything, the element's gonna shrink to the smallest size that fits the text and content inside the elemtent. If you want multiple elements to have the same size, definitely use the width & height properties.
width: 100vw;
height: 100vh;
Above is another way to set your element's size. We used "px" for the unit previously, but this time, we used the "vw" and "vh" units for the length. "vw" stands for viewport width and "vh" is viewport height. 100vw means 100% of the screen's width, and 100vh means 100% of the screen's height. In this example, the viewport is the output box, so if you paste the code into the example, you'll see the element enlarges to 100% of the output box's size.
If you paste the code in correctly, you'll probably notice that there's some white space outside of the boxes even though you set the size to 100%. We'll explore more about that white space in the next tutorial, so click Next and continue learning more CSS!