Scribd
Upload
28 views11 pages

CSS Height Width and Max Width

The document discusses CSS properties for controlling element dimensions, including height, width, and max-width. The height and width properties set the dimensions of an element's content area, excluding padding, borders, and margins. Max-width sets the maximum width for an element, which can prevent horizontal scrollbars on narrow screens. Examples demonstrate using pixels and percentages to set height, width, and max-width.

Uploaded by

Carlo Diaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views11 pages

CSS Height Width and Max Width

The document discusses CSS properties for controlling element dimensions, including height, width, and max-width. The height and width properties set the dimensions of an element's content area, excluding padding, borders, and margins. Max-width sets the maximum width for an element, which can prevent horizontal scrollbars on narrow screens. Examples demonstrate using pixels and percentages to set height, width, and max-width.

Uploaded by

Carlo Diaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

2/28/23, 6:31 PM CSS Height, Width and Max-width

Dark code
  HTML CSS   
 Bootcamp Menu  Log in

CSS Height, Width and Max-width


❮ Previous Next ❯

The CSS height and width properties are used to set the height and width of an
element.

The CSS max-width property is used to set the maximum width of an element.

This element has a height of 50 pixels and a width of 100%.

Try it Yourself »

CSS Setting height and width


The height and width properties are used to set the height and width of an element.

The height and width properties do not include padding, borders, or margins. It sets the
height/width of the area inside the padding, border, and margin of the element.

CSS height and width Values


The height and width properties may have the following values: Dark mode
https://www.w3schools.com/css/css_dimension.asp
D k d 1/11
2/28/23, 6:31 PM CSS Height, Width and Max-width

auto - This is default. The browser calculates the height and width
Dark code
  HTML CSS   
length - Defines the height/width in px, cm, etc.
% - Defines the height/width in percent of the containing block
initial - Sets the height/width to its default value
inherit - The height/width will be inherited from its parent value

CSS height and width Examples


This element has a height of 200 pixels
and a width of 50%

Example
Set the height and width of a <div> element:

div {
height: 200px;
width: 50%;
background-color: powderblue;
}

Try it Yourself »

This element has a height of 100 pixels and a width of 500


pixels.

Example Dark mode


https://www.w3schools.com/css/css_dimension.asp
D k d 2/11
2/28/23, 6:31 PM CSS Height, Width and Max-width

Set the height and width of another <div> element:


Dark code
  HTML CSS   
div {
height: 100px;
width: 500px;
background-color: powderblue;
}

Try it Yourself »

Note: Remember that the height and width properties do not include padding,
borders, or margins! They set the height/width of the area inside the padding, border,
and margin of the element!

ADVERTISEMENT

Setting max-width
The max-width property is used to set the maximum width of an element.

The max-width can be specified in length values, like px, cm, etc., or in percent (%) of
the containing block, or set to none (this is default. Means that there is no maximum
width).

The problem with the <div> above occurs when the browser window is smaller than the
width of the element (500px). The browser then adds a horizontal scrollbar to the page.
Dark mode
https://www.w3schools.com/css/css_dimension.asp
D k d 3/11
2/28/23, 6:31 PM CSS Height, Width and Max-width
Dark code
Using max-width instead, in this situation, will improve the browser's handling of small
  HTML CSS   
windows.

Tip: Drag the browser window to smaller than 500px wide, to see the difference
between the two divs!

This element has a height of 100 pixels and a max-width of


500 pixels.

Note: If you for some reason use both the width property and the max-width property
on the same element, and the value of the width property is larger than the max-
width property; the max-width property will be used (and the width property will be
ignored).

Example
This <div> element has a height of 100 pixels and a max-width of 500 pixels:

div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}

Try it Yourself »

Try it Yourself - Examples


Set the height and width of elements
This example demonstrates how to set the height and width of different elements.

Set the height and width of an image using percent


This example demonstrates how to set the height and width of an image using a percent
value.

Dark mode
https://www.w3schools.com/css/css_dimension.asp
D k d 4/11
2/28/23, 6:31 PM CSS Height, Width and Max-width

Set min-width and max-width of an element


Dark code
This  HTML CSS   
example demonstrates how to set a minimum width and a maximum width of an
element using a pixel value.

Set min-height and max-height of an element


This example demonstrates how to set a minimum height and a maximum height of an
element using a pixel value.

Test Yourself With Exercises

Exercise:
Set the height of the <h1> element to "100px".

<style>
h1 {
: 100px;
}
</style>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>

Submit Answer »

Start the Exercise

Dark mode
https://www.w3schools.com/css/css_dimension.asp
D k d 5/11
2/28/23, 6:31 PM CSS Height, Width and Max-width
Dark code
  HTML CSS   
All CSS Dimension Properties
Property Description

height Sets the height of an element

max-height Sets the maximum height of an element

max-width Sets the maximum width of an element

min-height Sets the minimum height of an element

min-width Sets the minimum width of an element

width Sets the width of an element

❮ Previous Next ❯

ADVERTISEMENT

Dark mode
https://www.w3schools.com/css/css_dimension.asp
D k d 6/11
2/28/23, 6:31 PM CSS Height, Width and Max-width
Dark code
  HTML CSS   

Dark mode
https://www.w3schools.com/css/css_dimension.asp
D k d 7/11
2/28/23, 6:31 PM CSS Height, Width and Max-width
Dark code
  HTML CSS COLOR PICKER   



Get certified
by completing
a CSS
course today!

school
w3 s

3
CE

02

TI 2
R

FI .
ED

Get started

ADVERTISEMENT
Dark mode
https://www.w3schools.com/css/css_dimension.asp
D k d 8/11
2/28/23, 6:31 PM CSS Height, Width and Max-width
Dark code
  HTML CSS   

ADVERTISEMENT

ADVERTISEMENT

Report Error

Spaces

Upgrade

Newsletter
Dark mode
https://www.w3schools.com/css/css_dimension.asp
D k d 9/11
2/28/23, 6:31 PM CSS Height, Width and Max-width
Dark code
  HTML CSS Get Certified   

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples

Get Certified
HTML Certificate
CSS Certificate
JavaScript Certificate
Dark mode
https://www.w3schools.com/css/css_dimension.asp
D k d 10/11
2/28/23, 6:31 PM CSS Height, Width and Max-width

Front End Certificate Dark code


  HTML CSS SQL Certificate   
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate

FORUM | ABOUT

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and
learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant
full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use,
cookie and privacy policy.

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.


W3Schools is Powered by W3.CSS.

https://www.w3schools.com/css/css_dimension.asp 11/11

You might also like