Home 〉 CSS Tutorials 〉 CSS Width and Height Property Tutorial with Examples for Beginners

CSS Width and Height Property Tutorial with Examples for Beginners !

CSS Width and Height Property Tutorial with Examples for Beginners !

Ever wondered how to control the size of elements on your webpage? The CSS `width` and `height` properties let you define the dimensions of elements, ensuring consistent layouts across devices. This tutorial explains how to set these properties using different units like pixels, percentages, and viewport units. It also discusses the impact of content, padding, and borders on element sizing. By mastering these properties, you can create responsive and well-structured designs. Here is the full guide on CSS Width and Height Property Tutorial

CSS 'width' and 'height' Properties - Easy Guide with Examples

The CSS 'width' and 'height' properties are used to set the size of elements on a web page. They define how wide and how tall an element should be.

Let's break it down with clear examples.

Basic Syntax

Syntax ✍

selector {
width: value;
height: value;
}

Values can be:

  • Fixed units like 'px', 'em', 'rem'
  • Percentage relative to parent
  • Auto for default sizing
  • Viewport-based units like 'vw' and 'vh'

Examples of CSS Width and Height

Fixed Width and Height in Pixels

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
width: 200px;
height: 100px;
background-color: lightblue;
}

</style>
</head>
<body>

<div class="box">Box with 200px width and 100px height</div>

</body>
</html>

output 📌

Box with 200px width and 100px height
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

The box is always 200px wide and 100px tall, regardless of the screen size.

Width and Height in Percentage

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.container {
width: 100%;
}
.box {
width: 50%;
height: 100px;
background-color: lightgreen;
}

</style>
</head>
<body>

<div class="container">
<div class="box">This box is 50% of container's width</div>
</div>

</body>
</html>

output 📌

This box is 50% of container's width
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

The width of '.box' is 50% of its parent container. This is useful for responsive design.

Auto Value

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
width: auto;
height: auto;
background-color: lightcoral;
}

</style>
</head>
<body>

<div class="box">This box takes automatic width and height based on content</div>

</body>
</html>

output 📌

This box takes automatic width and height based on content
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

The size adjusts automatically to fit the content inside the box.

Viewport-Based Units

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
width: 50vw;
height: 30vh;
background-color: lightgray;
}

</style>
</head>
<body>

<div class="box">Width is 50% of viewport width and height is 30% of viewport height</div>

</body>
</html>

output 📌

Width is 50% of viewport width and height is 30% of viewport height
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

'vw' and 'vh' are relative to the browser window. Useful for full-screen layouts.

min-width, max-width, min-height, max-height

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
width: 80%;
max-width: 500px;
min-width: 200px;
height: 100px;
background-color: lightyellow;
}

</style>
</head>
<body>

<div class="box">This box has width limits</div>

</body>
</html>

output 📌

This box has width limits
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

The box width adjusts responsively but stays between 200px and 500px.

Related Concepts

'box-sizing': Affects how width/height are calculated.

Example 📄

box-sizing: border-box;

This includes padding and border in the total width and height.

'overflow': What happens when content is larger than the box.

Conclusion

CSS 'width' and 'height' are essential for creating layouts and controlling the size of your elements. By learning how to use fixed, flexible, and responsive values, you can build clean and functional designs. Practice using different units and responsive techniques to see how your layouts adjust across devices.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

What units can I use for width and height?

You can use px, %, em, rem, vw, vh, and more depending on your design needs.

What is the difference between 'width: auto' and a fixed width?

'auto' allows the element to grow or shrink based on its content, while a fixed width forces a specific size.

What does 'box-sizing: border-box' do?

It includes padding and border in the total width and height, preventing unexpected size issues.

How do I make an element responsive?

Use relative units like '%', 'vw', 'vh', and media queries to make your layout flexible.

Can I set both 'max-width' and 'min-width' together?

Yes. This allows the element to stay within a size range, helpful in responsive designs.

Previous Post Next Post