CSS Width and Height
The width and height property
defines the width and height of the content area of an element.
This width and height
does not include paddings, borders, or margins. See the CSS box model to
know how the effective width and height of an element's box is calculated.
Let's try out the
following example and see how it actually works:
See the Pen CSS Width -Height by PANKAJ (@pankkap) on CodePen.
The above style rules assign a fixed width of 200 pixels and height of 100px to the <div> element.
The width and height properties
can take the following values:
- length - specifies a width in px, em,
rem, pt, cm, etc.
- % - specifies a width in
percentage (%) of the width of the containing element.
- auto - the browser calculates a suitable width for the element.
- initial - Sets the width and height to its default value, which is auto.
- inherit - specifies that the width should be inherited from the parent element.
You
can not specify negative values to the width and height properties.
Tip: Typically when you create a block element, such
as <div>, <p>, etc. browser automatically set their width
to 100% of the available width, and height to whatever is needed to show all
the content. You should avoid setting a fixed width and height unless it is necessary.
CSS Maximum Width and Height
You
can use the max-width and max-height property to specify the maximum
width and height of the content area. This maximum width and height does not
include paddings, borders, or margins.
See the Pen CSS Max-width height by PANKAJ (@pankkap) on CodePen.
An element cannot be wider than the max-width value, even if the width property value is set to something larger. For instance, if the width is set to 200px and the max-width is set to 150px, the actual width of the element will be 150px. Note: If the min-width property is specified with a value greater than that of max-width property, in this case the min-width value will in fact be the one that's applied.
Likewise, an element that has max-height applied will never be taller than the value specified, even if the height property is set to something larger. For example, if the height is set to 100px and the max-height set to 75px, the actual height of the element will be 75px. Note: If the min-height property is specified with a value greater than that of max-height property, in this case the min-height value will in fact be the one that's applied.
CSS Minimum Width and Height
You can use the min-width and min-height property specify the minimum width and height of the content area. This minimum width and height does not include paddings, borders, or margins.
See the Pen CSS Min -Width Height by PANKAJ (@pankkap) on CodePen.
An element cannot be narrower than the min-width value, even if the width property value is set to something lesser. For example, if the width is set to 300px and the min-width is set to 400px, the actual width of the element will be 400px. Note: The min-width property is usually used to ensure that an element has at least a minimum width even if no content is present. However the element will be allowed to grow normally if its content exceeds the minimum width set.
Similarly,
an element to which min-height is
applied will never be smaller than the value specified, even if the height property is set to something lesser.
For example, if the height is set
to 200px, and the min-height is
set to 300px, the actual height of the element will be 300px.
Note: The min-height property is usually used to
ensure that an element has at least a minimum height even if no content is
present. However the element will be allowed to grow normally if the content
exceeds the minimum height set.
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 |
CSS Overflow
The CSS
overflow property specifies
how to handle the content when it overflows its block level
container. We know that every single element on a page is a rectangular box and
the size, positioning and behavior of these boxes are controlled via CSS.
If you don't set the height of the box, it will grow as large as the
content. But if you set a specific height or width of the box and the content
inside cannot fit then what will happen. The CSS overflow property is used to
overcome this problem. It specifies whether to clip content, render scroll
bars, or just display content.
CSS Overflow property values
- Visible: It specifies that overflow is not
clipped. it renders outside the element's box. this is a default value.
- Hidden: It specifies that the overflow is
clipped, and rest of the content will be invisible.
- Scroll: It
specifies that the overflow is clipped, and a scroll bar is used to see the
rest of the content.
- Auto: It specifies that if overflow is
clipped, a scroll bar is needed to see the rest of the content.
- Inherit: It inherits the property from its
parent element.
- Initial:
It is used to set the property to its initial value.
See the Pen CSS Overflow by PANKAJ (@pankkap) on CodePen.