height: 200px;
width: 50%;
background-color: powderblue;
}
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
The image displayed on the browser of the above two examples
Note: height
and width
properties do not include padding,
borders, and margins. They will determine the height / width of the area inside the element's padding,
border, and margin.
Max-width setting
The max-width
used to select the maximum width for the element, can use the values:
Possible problems with the card
above is when the browser window is smaller than the element width (500px), the browser will add a vertical scroll bar to the rang. If using
max-width,
the browser will handle it better when the window is small.
Note: max-width
will override the width.
The example below shows the element
has a height of 100px and a maximum width of 500px.
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
Previous article: Padding in CSS
The following article: Box Model in CSS