CSS3 Examples

CSS MAX-HEIGHT

Written by jon on 9:33 AM This property allows a maximum height to be set for an element box. The calculation for the element’s height may be less than this value, but if the calculated ‘height’ value is above this value it will recompute the ‘height’ using the ‘max-height’ value as the new ‘height’ value. If the value of ‘min-height’ is greater than the value of ‘max-height’, the ‘max-height’ property value becomes the ‘min-height’ value.

Example

h5 { max-height: 150px } <h5 style=”max-height: 150px”>content</h5>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. none No limit is placed on the maximum allowable height for the element. [length] Refers to an absolute measurement for the maximum computed element box height. Negative values are not allowed. [percentage] Refers to a percentage of the height of the containing element block. If a value is not explicitly given for the containing block, it should be treated like ‘auto'.

CSS MIN-HEIGHT

Written by jon on 9:32 AM This property allows a minimum height to be set for an element box. The calculation for the element’s height may be greater than this value, but if the value falls below this value it will recompute the height based on the ‘min-height’ value. If the value of ‘min-height’ is greater than the value of ‘max-height’, the ‘max-height’ property value becomes the ‘min-height’ value. If the calculated value for the ‘height’ property is less than the ‘min-height’ value, the calculations are done again using the ‘min-height’ value as the value for the ‘height’ property.

Example

h5 { min-height: 100px } <h5 style=”min-height: 100px”>content</h5>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. [length] Refers to an absolute measurement for the minimum computed element box height. Negative values are not allowed. [percentage] Refers to a percentage of height of the containing element block. If a height is not explicitly given for the containing block, it should be treated like ‘auto'.

CSS HEIGHT

Written by jon on 9:30 AM This property specifies the height of an element’s rendering box for block-level and replaced elements (for other types of elements, height calculations are taken from their inherited or assigned ‘line-height’ value.)
If an element’s computed height is greater than that specified by the ‘height’ property, the content will overflow the rendering box according to the ‘overflow’ property. Negative values for the ‘height’ property are not allowed.
In addition to the ‘height’ property, two other properties - ‘min-height’ and ‘max-height’ - place constraints on the allowed value for an element’s rendering box height. The ‘height’ value is first computed without consideration for these other two properties. If the computed value is greater than the ‘max-height’ value or less than the ‘min-height’ value, the height is re-calculated using the ‘max-height’ or ‘min-height’ as the new ‘height’ value.

Example

img.class1 { height: 75px; width: 75px } <img style=”height: 75px; width: 75px” src=”image.jpg” mce_src=”image.jpg”>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. auto The height is determinant on the values of other properties. [length] Refers to an absolute measurement for the computed element box height. Negative values are not allowed. [percentage] Refers to a percentage of the height of the containing element block. If a height is not explicitly given for the containing block, it should be treated like ‘auto'.

CSS LINE HEIGHT

Written by jon on 9:28 AM This property specifies the height of an in-line element box. If the ‘line-height’ value is greater than the value of the ‘font-size’ for the element, this difference (called the “leading”) is cut in half (called the “half-leading”) and distributed evenly on the top and bottom of the in-line box. In this manner, the content of an in-line element box is centered within the line-box (assuming no ‘vertical-align’ property is also set to change this behavior.) Negative values for this property are not allowed. This property is also a component of the ‘font’ shorthand property.

A few other rules govern line-height calculation:

• If the computed value for the ‘line-height’ property is less than the computed ‘font-size’ for an in-line element box, fonts may ‘bleed’ (overflow) the element box.
• If this property is set for a block-level element box that contains in-line elements, the value specifies the minimal height of each of the in-line boxes.
• For in-line element boxed, this property specifies the height of the boxes generated by the element.
• For in-line replaced elements the height of the element box is given by the ‘height’ property instead of the ‘line-height’ property.
• If an element box contains text in more than one font-size, the ‘line-height’ property should be determined using the largest font-size. This helps to create consistent baselines between adjacent line boxes.

Example

div.test { line-height: 160%; font-size: 10pt } <div style=”line-height: 160%; font-size: 10pt”>content</div>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. normal Sets the line height to a ‘reasonable' value relative to the element's font face. Browser dependent results. CSS2 recommends a computed value between 1.0 and 1.2. [number] This number is a multiplier to determine the line height as a factor of the current element font-size. To determine the line height from the [number], multiply the current element font-size by the [number]. Child elements will inherit the multiplying factor. Negative values are not allowed. [length] This sets the ‘line-height' to an explicit length value. Negative values are not allowed. [percentage] This number is also a multiplier (like [number]) used to determine the line height as a factor of the current element font-size. To determine the line height from the [percentage], multiply the current element computed ‘font-size' by the [percentage]. Negative values are not allowed.

CSS MAX-WIDTH

Written by jon on 9:27 AM This property allows a maximum width to be set for an element box. The calculation for the element’s width may be less than this value, but if the calculated ‘width’ value is above this value it will recompute the ‘width’ using the ‘max-width’ value as the new ‘width’ value. If the value of ‘min-width’ is greater than the value of ‘max-width’, the ‘max-width’ property value becomes the ‘min-width’ value.

Example

h5 { max-width: 150px } <h5 style=”max-width: 150px”>content</h5>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. none No limit is placed on the maximum allowable width for the element. [length] Refers to an absolute measurement for the maximum computed element box width. Negative values are not allowed. [percentage] Refers to a percentage of the width of the containing element block.

CSS MIN-WIDTH

Written by jon on 9:25 AM This property allows a minimum width to be set for an element box. The calculation for the element’s width may be greater than this value, but if the value falls below this value it will recompute the width based on the ‘min-width’ value. If the value of ‘min-width’ is greater than the value of ‘max-width’, the ‘max-width’ property value becomes the ‘min-width’ value. If the calculated value for the ‘width’ property is less than the ‘min-width’ value, the calculations are done again using the ‘min-width’ value as the value for the ‘width’ property.
Additionally, the browser may have its own minimum allowable width for a specific element type. If the specified ‘min-width’ is less than this value for an element, the browser default minimum width may be used in its place.

Example

h5 { min-width: 100px } <h5 style=”min-width: 100px&quot>content</h5>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. [length] Refers to an absolute measurement for the minimum computed element box width. Negative values are not allowed. [percentage] Refers to a percentage width of the containing element block.

CSS Dimensions

Written by jon on 10:46 AM This property specifies the width of an element’s rendering box for block-level and replaced elements. Negative values are not allowed.
In addition to the ‘width’ property, two other properties - ‘min-width’ and ‘max-width’ - place constraints on the allowed value for an element’s rendering box width. The ‘width’ value is first computed without consideration for these other two properties. If the computed value is greater than the ‘max-width’ value or less than the ‘min-width’ value, the width is re-calculated using the ‘max-width’ or ‘min-width’ as the new ‘width’ value.

Example

img.class1 { height: 75px; width: 75px } <img style=”height: 75px; width: 75px” src=”image.jpg” mce_src=”image.jpg”>

Possible Values

Value Description inherit Explicitly sets the value of this property to that of the parent. auto The width is determinant on the values of other properties. [length] Refers to an absolute measurement for the computed element box width. Negative values are not allowed. [percentage] Refers to a percentage of the width of the containing element block.