CSS height and width properties are used to set the height and width of an element which are set to auto by default. The width and height values can be specified in length values like px, cm, etc, or in percent (%) of the containing block.
div {
height: 200px;
width: 50%;
background: red;
}
CSS height and width properties do not include paddings, borders and margins. They set the height and width of the HTML element inside the paddings, borders and margin of the element.
CSS 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 (default). The max-width value limits the maximum allowed width for an element. Any value below that width will be shown as it is while elements with higher width value than the one defined in max-width will be resized to the max-width value.
CSS max-width property is higly useful where a web page has larger elements which cannot be displayed on smaller screen without resizing.
img{
max-width: 100%;
}
CSS max-height property is used to set the maximum height of an element. The max-height can be specified in length values like px, cm, etc, or in percent (%) of the containing block or set to none (default). The max-height value limits the maximum allowed height for an element. Any value below that height will be shown as it is while elements with higher height value than the one defined in max-height will be resized to the max-height value.
CSS max-height property is higly useful where a web page has elements with greater height which might look odd visually.
div{
max-height: 300px;
}
The CSS overflow property controls what happens to content that is too big to fit into an area. It specifies whether to clip the content or add scrollbars when the content of an element is too big to fit in the specified area. It is generally used with the CSS height property while it can be used with CSS width property too.
The overflow property works for block elements only which have a specified width and height and can have one of the following values.
| Value | Description |
|---|---|
| visible | Default. The content is allowed to flow outside the specified width and height. |
| hidden | The overflow is clipped and the rest of the content will be hidden. |
| scroll | The overflow is clipped and a scrollbar is added both horizontally and vertically which can be used to see the rest of the content |
| auto | Similar to scroll but it adds scrollbars only when it is needed |
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: scroll;
}
The overflow-x and overflow-y properties specifies whether to change the overflow of content horizontally or vertically.
CSS property overflow-x specifies adds a horizontal scrollbar while overflow-y adds a vertical scrollbar.
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow-y: scroll;
}
Leave a comment