HTML elements can be created with dimensions as per the size of the content they must display. CSS width and height are used to define the size of the elements horizontally and vertically. In addition to width and height you can also specify maximum and minimum height and width along with the space between lines of text.
CSS width and height properties can take length of the dimension in absolute pixel count, percentage of the container element or Auto according to the content. The dimensions are always that of the box of the HTML elements as discussed in CSS Box Model.
CSS Width and Height Properties
Height
This is used to define the height of the Box containing the HTML element’s contents.
{height: pixels| percentage| auto;}
Width
CSS width property is used to specify the horizontal width of the box of the HTML element.
{width: pixels| percentage| auto;}
Line-Height
Line height is defined as the height of the line of text. The characters will not grow in height. Blank space above and below the text will be added to create the height specified for line-height property.
{line-height: pixels| percentage| auto;}
Min-height
Min-height property defines the least height the box for an HTML element will have even if the content is less than the height of the element.
{min-height: pixels| percentage| auto;}
Max-height
Max-height property defines the maximum height the box for an HTML element will have even if the content is greater than the height of the element. The rest of the content can be seen by using the scroll bars that will appear if overflow property is set.
{max-height: pixels| percentage| auto;}
Min-width
Min-width property defines the least width the box of an HTML element will have if the content is less than the width of the element.
{min-width: pixels| percentage| auto;}
Max-width
Max-width property defines the maximum width the box of an HTML element will have even if the content is longer than the width of the element. The rest of the content can be seen by using the scroll bars that will appear if overflow property is set.
{max-width: pixels| percentage| auto;}
Example CSS Width and Height Properties
<HTML> <STYLE> .h{height:50px; background-color:pink;} .w{width:50%; background-color:yellow;} .lh{line-height:50px; background-color:lavender;} .mnw{min-width:50%; background-color:aqua; } .mxw{max-width:60%; background-color:gray; overflow:scroll; } .mnh{min-height:20px; background-color:purple; } .mxh{max-height:50px; background-color:lime; } </STYLE> <BODY > <P class="h"><B>HEIGHT</B>dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P> <P class="w"><B>WIDTH</B>dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P> <P class="lh"><B>Line Height</B>dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P> <P class="mnw"><B>Minimum Width</B>expressions of Lorem Ipsum.</P> <P class="mxw"><B>Maximum width</B>dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P> <P class="mnh"><B>Minimum height</B>dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P> <P class="mxh"><B>Maximum Height</B>dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P> </BODY> </HTML>
