HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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
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.
The height
and width
properties
may have the following values:
auto
- This is default. The browser
calculates the height and widthlength
- Defines the height/width in px, cm,
etc.%
- Defines the height/width in percent of
the containing blockinitial
- Sets the height/width to its
default valueinherit
- The height/width will be
inherited from its parent valueThis element has a height of 200 pixels and a width of 50%
Set the height and width of a <div> element:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
This element has a height of 100 pixels and a width of 500 pixels.
Set the height and width of another <div> element:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
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!
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.
Using max-width
instead, in this situation, will improve the browser's handling of small windows.
This element has a height of 100 pixels and a max-width of 500 pixels.
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).
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;
}
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>
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 |