News & UpdatesProgrammingWeb programming Store My Projects

CSS Tutorial – 18 – Dimension

CSS tutorials

The dimension properties control the width and height of an element as well as the minimum and maximum dimensions.

Width and height properties

By default, the width of an element will be set to “auto” meaning the browser will automatically expand it to fit the content. The height as well will be set to “auto” by default, which will collapse the element’s height to its content. The properties can be assigned with either a percentage value or a length value. Once the dimensions have been set the element will keep that size no matter how the page is resized.

width | height : auto | <length> | <percentage>

Min-width and min-height properties

The min-width and min-height properties set the minimum dimensions of an element. The width and height will still expand to fit the content, but the element won’t collapse below the specified minimum dimensions, which does not include padding, borders, or margins.

min-width | min-height : <length> | <percentage>

Max-width and max-height

By also setting the maximum dimension an interval is defined for how the size of the element may vary. Keep in mind that the fixed width and height properties should not be used with the min- and max- properties.

max-width | max-height : <length> | <percentage> | none

IE6 and below doesn’t support the min-height or max-height properties.

Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours