codescracker


css

CSS Width and Height



« Previous Tutorial Next Tutorial »


The width and height properties specify the width and height of the content area, padding area, or border area of a box.

The syntax of these properties is given as follows:

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

In the preceding syntax, the <length> specifies the width of the content area; <percentage> specifies the width of the content area in the percentage; and auto specifies that the width depends on the values of other properties.

Note - You cannot provide negative values to the width and height properties.

Example

Some examples of using these properties are given as follows:

p { width: 100px; height: 50px; }

CSS min-width and min-height

The min-width and min-height properties are used to set the minimum width and height respectively, of a block-level element.

The syntax of these properties is given as follows:

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

In the preceding syntax, <length> specifies a fixed minimum width height; <percentage> specifies a minimum value for width or height as a percentage of the corresponding dimension of the containing block; and none specifies no limit on the width or height of the box.

CSS max-width and max-height

The max-width and max-height properties are used to set the maximum width and height, respectively, of the block-level element.

The syntax of these properties is given as follows:

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

In the preceding syntax, <length> specifies a fixed maximum width or height; <percentage> specifies a maximum value for width or height as a percentage of the corresponding dimension of the containing block; and none specifies no limit on the width or height of the box.

Note - You cannot provide negative values to the min-width, max-width, min-height, and max-height properties.

Example

Some examples of using min-width, max-width, min-height, and max-height properties are given as follows :

p { min-width: 10px; min-height: 10px;
	max-width: 100px; max-height: 100px; }

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test