Now that we have explored box models, and how to set the padding, border and margin around an element, we can learn how to control the dimensions of an element, or box. If specific dimensions are not set, the size of the element will expand or contract to fit around the size of its contents, but there will be times when you will need an element/box to conform to a certain size. There are six properties for this purpose:
|width||Sets the Width of the Box/Element|
|min-width||Sets the Minimum Width of the Box/Element|
|max-width||Sets the Maximum Width of the Box/Element|
|height||Sets the Height of the Box/Element|
|min-height||Sets the Minimum Height of the Box/Element|
|max-height||Sets the Maximum Height of the Box/Element|
The dimensions properties can accept three types of values:
|Auto||Allows the Browser to Determine the Width or Height||width: auto;||height: auto;|
|Length||Fixes The Size In Pixels (px), Points (pt) or Font-Size (em)||width: 5em;||height: 5em;|
|Percent||Sets the Size As A Percentage of the Containing Element||width: 5%;||height: 5%;|
Now we can take a look at some examples of what can happen when we control the dimensions of a paragraph element. A border is added to each paragraph so that the size is visible.
The CSS overflow property can determine how a specifically sized HTML element is displayed by adding scrollbars, hiding the excess contents, or enlarging the element so that all of its contents are visible. The overflow property can accept only four values (with no more than one of those values per declaration).
The following paragraph elements will give you an example of how that the overflow property can be used.