WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Layout - The display Property


CSS Dimension Properties

The CSS measurement properties enable you to control the tallness and width of an element.

This component has a width of 100%.


Setting tallness and width

The height and width properties are utilized to set the tallness and width of an element.

The height and width can be set to auto (this is default. Implies that the program figures the stature and width), or be determined in length values, similar to px, cm, and so forth., or in percent (%) of the containing block.

This <div> component has a stature of 100 pixels and a width of 500 pixels.

Note: The height and width properties do exclude cushioning, fringes, or then again edges; they set the tallness/width of the region inside the cushioning, outskirt, furthermore, edge of the element!

The following model demonstrates a <div> component with a tallness of 100 pixels and a width of 500 pixels:

Example

div {
    width: 500px;
    stature: 100px;
    fringe: 3px strong #73AD21;
}

Try it yourself »


Setting max-width

The max-width property is utilized to set the greatest width of an element.

The max-width can be indicated in length values, similar to px, cm, and so on., or in percent (%) of the containing square, or set to none (this is default. Implies that there is no most extreme width).

The issue with the <div> above happens when the program window is littler than the width of the component (500px). The program at that point adds a level scrollbar to the page.

Using max-width rather, in this circumstance, will enhance the program's treatment of little windows.

Tip: Drag the program window to littler than 500px wide, to see the contrast between the two divs!

This <div> component has a stature of 100 pixels and a maximum width of 500 pixels.

Note: The estimation of the max-width property abrogates width.

The following model demonstrates a <div> component with a stature of 100 pixels and a max-width of 500 pixels:

Example

div {
    max-width: 500px;
    stature: 100px;
    fringe: 3px strong #73AD21;
}

Try it yourself »