When you’re designing a web page, you’ll likely want to specify specific sizes for the elements that appear on the web page. For instance, you may want a box to have a certain height, or a line of text to span a certain width.
That’s where the CSS height and width properties come in. The height and width properties allow you to set the height and width of an element in CSS.
This tutorial will discuss, with examples, the basics of the CSS height and width properties and how to use the min and max height and width properties to design responsive elements. By the end of reading this tutorial, you’ll be an expert at using the CSS height and width properties to set the size of an element on a web page.
CSS Height and Width
Setting the height and width of an element on a web page allows you to define the space that element will take up on the web page. This can help you develop a structure for the elements on your web page so that each element appears correctly based on your needs.
To define how far an element can stretch horizontally and vertically, you can use the width and height properties, respectively.
The width and height properties allow you to set a specific width and height for the content area of a box. This means that the width and height properties control the space the contents of a box have and do not affect any margins or padding set for a box.
The height and width properties use the following syntax:
height: heightValue; width: widthValue;
The values heightValue and widthValue can accept any one of the following values:
- auto: The browser automatically calculates the height and width.
- length: The width or height of a box in px, em, rem, etc.
- percentage: The width or height of a box as a percentage of the size of the block in which an element appears.
- initial: The default value specified for the box.
- inherit: The same value as the width or height for the box in which an element appears.
Now that we know the basics of the height and width properties, we can explore an example of each of these properties in action.
CSS height and width Properties
Suppose we are designing a website for a local cafe called The Pickled Apple. This cafe has asked us to create a box on the “About” page of their website, which should store a brief description of the cafe.
This box should be 200px wide and 200px tall and have a light gray background. These dimensions have been chosen to ensure that the other elements we want to add to the web page will fit when we implement them.
We could use the following code to create the box:
<html>
<p class="aboutBox">The Pickled Apple, based in Springfield, Illinois, has been proudly serving high-quality teas, specialty coffees, and delicious cakes since 2004.</p>
<style>
.aboutBox {
height: 200px;
width: 200px;
background-color: lightgray;
}Click the 
button in the code editor above to see the output of our HTML/CSS code.
Let’s break down our code. In our HTML file, we have created a paragraph of text using a <p> tag. This <p> tag has the class name aboutBox, which we use in our CSS file to style the paragraph of text.
In our CSS file, we have defined a style rule that applies to any element with the class name aboutBox. This style rule sets the height of an element to 200px, the width of an element to 200px, and sets the background color of an element to light gray.
If we wanted our element to be 100px wide, we could change the width property to be equal to 100px. Or if we wanted our element to be 300px tall, we could change the height property to be equal to 300px.
CSS min and max Length Properties
Width and height are fixed values. This means that the width and height you specify will remain the same and will not change if you resize the window or view the web page on a different device (unless you use a relative height value, such as a percentage of the size of the parent element).
This is important to understand because if you want to design an accessible experience, it may not be practical to set specific heights and widths for elements. For instance, if you specify the width of an image to be 500px, that may cause the image to render incorrectly if a user views the site on a mobile device, whose screen size may be smaller.
That’s where the min and max length values come in.
To make an element adapt to different screen and viewport sizes, you can use the min-width, max-width, min-height, and max-height properties. When you specify these properties, the values specified for width and height will be overridden.
The min-height property defines the minimum height of a property. If min-height is specified, an element’s height can never be lower than the value of min-height. The min-width property defines the minimum width of a property and works in the same way.
Similarly, if you want to define the maximum height or width of a property, you can use max-height and max-width, respectively.
Let’s return to our cafe example from earlier. Suppose we want the width of our box to change depending on the size of the user’s screen. The maximum width of the box should be 500px, and our box should never be narrower than 100px. We could accomplish this goal using the following code:
<html>
<p class="aboutBox">The Pickled Apple, based in Springfield, Illinois, has been proudly serving high-quality teas, specialty coffees, and delicious cakes since 2004.</p>
<style>
.aboutBox {
max-width: 500px;
min-width: 100px;
background-color: lightgray;
}Click the button in the code editor above to see the output of our HTML/CSS code.
Let’s break down our code and discuss how it works. In our HTML file, we have specified a paragraph of text between <p> tags which contains the same text as our first example. The class name associated with this paragraph of text is aboutBox.
In our CSS file, we have specified three properties associated with the aboutBox class.
The max-width property is set to 500px, which means the maximum width of the box is 500px. The min-width property is set to 100px, which means the box will never appear narrower than 100px, no matter what device a user is viewing the site on. The background-color property is set to lightgray, which sets the background color of our box to light gray.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
The size of this box will change depending on the size of the browser. So, if you make the browser window smaller, the size of the box will change accordingly. However, no matter how large the browser window appears, the width of the <p> tag will never exceed 500px.
Conclusion
The CSS height and width properties allow you to define the height and width of an element on a web page.
However, these properties set a fixed value for the height and width of an element. If you want the size of a box to change depending on the size of the browser window, you can use the min-height, min-width, max-height and max-width properties.
This tutorial discussed, with reference to examples, the basics of height and width in CSS, how to use the height and width properties, and how to use the corresponding max and min height and width properties to set the size of an element on a web page. Now you’re ready to start using the height and width properties like an expert!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
