Width and height are used to control the size of elements on a web page. They help define how much space an element takes horizontally and vertically.
What is Width
Width sets how wide an element will be. It can be defined using different units such as pixels, percentages, or viewport units.
Example
div {
width: 300px;
}
This sets the element width to 300 pixels.
You can also use percentage values
div {
width: 50%;
}
This means the element will take up 50 percent of its parent container.
What is Height
Height sets how tall an element will be.
Example
div {
height: 200px;
}
This sets the height of the element to 200 pixels.
You can also use percentage
div {
height: 100%;
}
This makes the element take the full height of its parent. For this to work, the parent element must have a defined height.
Common Units
Pixels are fixed and do not change based on screen size
Percentages are relative to the parent element
Viewport width and height adjust based on screen size
Example
div {
width: 50vw;
height: 50vh;
}
This sets the element to half of the screen width and height.
Max and Min Values
You can control limits using max width, min width, max height, and min height.
Example
img {
max-width: 100%;
height: auto;
}
This ensures images do not overflow their container and stay responsive.
Important Notes
If width is not set, elements usually take full width by default
Height does not always expand automatically unless content increases
Overflow may occur if content is larger than the defined size
Practice Task
Create a div with a fixed width and height
Try using percentage width
Experiment with max width for images