Height and Width
Height
The height property sets the height of the content area. Note that, it doesn’t change height of the content. See the below given code:
Sample code:
h1{height:5%;background-color:red;text-align:center;}
Min-height:
The min-height property sets the maximum width of an element.
Max-height:
The min-height property allows authors to constrain box heights to a certain range.
<!DOCTYPE html> <html> <head> <style> div{ height:50px; background-color:red; text-align:center; } </style> </head> <body> <div>Learning how the Height works in box model</div> </body> </html>
Width
The width property sets the width of the content area. Note that, it doesn’t change width of the content. Add width property to above code as below:
Sample code:
h1{width:10%;height:5%;background-color:red;text-align: center;}
Min-width
The min-width CSS property sets the minimum width of an element.
Max-width
The max-width property allows authors of page to constrain content widths to a certain range.
The properties height, min-height, max-height, width, min-width and max-width set the height/width of the area inside padding, border, and margin of the element. It doesn’t include padding, borders, or margins.
<!DOCTYPE html> <html> <head> <style> div{ height:50px; width :200px; background-color:red; text-align:center; } </style> </head> <body> <div>Learning how the Height and width works in box model</div> </body> </html>
What is the difference between Max-width and width?
width keeps the size of the object static. Lets say you put width: 500 px for an image. When you re-size you screen the image size will still be 500 px. If you view it on a mobile phone and its screen width is less then 500 px the image will not fit in the screen. At the same time, when you set max-width:500 px it will re-size up to 500 px but when the screen goes smaller and the images doesn’t fit in the screen it will automatically re-size it to fit the screen.