CSS height and width (size)

CSS Height and Width (Size)

HTML element sizes are typically specified using the CSS width and height properties, which we can use to set element dimensions.

CSS also provides properties such as max-width , min-width , max-height , and min-height for setting the maximum and minimum widths and heights of an element.

Setting Height and Width with CSS

The height and width properties allow you to set the height and width of an element. These properties can accept the following values:


  • length : The element’s height and width can be specified in any length unit (pixels, points, ems, inches, etc.).

  • percentage (%) : You can pass a value as a percentage, which is relative to the containing block.

  • auto : The browser calculates the element’s height and width. This is the default value.

  • initial : Sets the height and width values ​​to their default values.

  • inherit : The height and width values ​​are inherited from their parent.

height and width properties do not add to the element’s layout, i.e., they do not include padding, margin, or borders. They set the height and width of the area within the element’s padding, border, and margin.

Example

The following example demonstrates how to use height and width to set the size of a div. 

<html> 
<head> 
<style> 
div { 
height: 100px; width: 80%; background-color: #eee; 
} 
</style> 
</head> 
<body> 
<h2>Setting Height and Width Properties</h2> 
<div>This div element has a height of 100px and a width of 80%.</div> 
</body> 
</html>

Setting max-height with CSS

CSS allows you to set a maximum height for an element using the max-height property. This property allows you to specify the maximum height of an element. The max-height property can have the following values:

  • none: No maximum height is set. This is the default value.

  • length: Sets the maximum height in length units (pixels, points, font size, inches, etc.).

  • percentage (%) : The value is expressed as a percentage of the containing block.

  • initial : Sets the height and width to their default values.

  • inherit : The value is inherited from its parent element.

Example

The following is an example of setting max-height using CSS:

<html> 
<head> 
<style> 
div.a { 
max-height: 100px; width: 80%; overflow: auto; 
background-color: #eee; padding:10px; 
} 
</style> 
</head> 
<body> 

<div class="a"> 
<h2>max-height: 100px and width:80%</h2> 
<p>The <i>max-height</i> property allows you to specify maximum height of an element. The value of the max-height property can be various, but this div can be maximum 100px high and so it is creating a Scrollbar to fit the content.</p>

</div>

</body>

</html>

Setting Minimum Height with CSS

CSS allows you to set a minimum height for an element using the min-height property. This property allows you to specify a minimum height for an element, ensuring it never shrinks below that value. The min-height property can have the following values:

  • length: Sets the minimum height in length units (px, pt, em, in, etc.)

  • percentage (%): The value is expressed as a percentage of the containing block.

  • initial: Sets the height and width values ​​to default values.

  • inherit: The value is inherited from the parent element.

When the content is smaller than the minimum height, the minimum height applies. When the content is larger than the minimum height, the min-height value has no effect on the element.

Example

The following is an example of setting min-height using CSS:

<html> 
<head> 
<style> 
div.a { 
min-height:200px; width: 80%; overflow: auto; 
background-color: #eee; padding:10px; 
} 
</style> 
</head> 
<body> 

<div class="a"> 
<h2>min-height: 200px and width:80%</h2> 
<p>The <i>min-height</i> property allows you to specify minimum height of an element. The value of the min-height property can be various, but this div can not shrink below to 200px even if you reduce the screen height less than 200px.</p>

</div>

</body>

</html>

Setting Maximum Width with CSS

CSS allows you to set a maximum width for an element using the max-width property. This property allows you to specify the maximum width of an element. The max-width property can have the following values:

  • none : No maximum width is set. This is the default value.

  • length : Sets the maximum width in length units (pixels, points, ems, inches, etc.).

  • percentage (%) : The value is a percentage of the containing block.

  • initial : Sets the height and width values ​​to their default values.

  • inherit : The value is inherited from the parent element.

The max-width value overrides the width property. If the content within the element is larger than the specified max-width, the element’s height will automatically adjust to accommodate the content. If the content within the element is smaller than the specified max-width, the max-width property has no effect.

Example

The following is an example of setting max-width using CSS:

<html> 
<head> 
<style> 
div.a { 
max-width: 600px; overflow: auto; 
background-color: #eee; padding:10px; 
} 
</style> 
</head> 
<body> 

<div class="a"> 
<h2>max-width: 600px </h2> 
<p>The <i>max-width</i> property allows you to specify maximum width of an element. This div can have maxmum width of 600px and if it has larger content than its width then it will adjust the height to fit the content.</p> </div> 
</body> 
</html>

Setting Minimum Width with CSS

CSS allows you to set a minimum width for an element using the min-width property. This property allows you to specify a minimum width for an element. It specifies the minimum width an element can have, ensuring that it never shrinks below that value. The min-width property can take the following values:

  • length : Sets the minimum width in length units (px, pt, em, in, etc.).

  • percentage (%) : The value is a percentage of the containing block.

  • initial : Sets the height and width values ​​to their default values.

  • inherit : The value is inherited from its parent element.

If the content within the element is larger than the min-width, the min-width property has no effect. However, if the content within the element is smaller than the specified min-width, the minimum width is applied.

Example

The following is an example of setting min-width using CSS:

<html> 
<head> 
<style> 
div.a { 
min-width:400px; width: 80%; overflow: auto; 
background-color: #eee; padding:10px; 
} 
</style> 
</head> 
<body> 

<div class="a"> 
<h2>min-width: 400px and width:80%</h2> 
<p>The <i>min-width</i> property allows you to specify minimum width of an element. This div can not shrink below to 400px even if you reduce the screen width less than 400px.</p> </div> 
</body> 
</html>

Setting Line Height with CSS

The line-height property allows you to set the spacing between lines of text. The line-height property can have the following values:

  • length : The passed value is used to calculate the height of the line box (px, pt, em, in, etc.)

  • percentage (%) : The value is relative to the element’s font size

  • number : A unitless number that is multiplied by the element’s font size

  • normal : Keyword. Defaults to 1.2, but it depends on the element’s font family.

Example

Here is an example of setting line height using CSS: 

<html> 
<head> 
<style> 
div.a { 
line-height: 1.0in; background-color: #eee; margin-bottom: 2px; 
} 
div.b { 
line-height: 50px; background-color: #eee; margin-bottom: 2px; 
} 
div.c { 
line-height: 5; background-color: #eee; margin-bottom: 5px; 
} 
div.d { 
line-height: normal; background-color: #eee; margin-bottom: 2px; 
} 
</style> 
</head> 
<body> 
<h2>Setting up line-height Property</h2> 
<div class="a">This div element has a line-height of 1.0 inch.</div> 
<div class="b">This div element has a line-height of 50px.</div> 
<div class="c">This div element has a line-height of 5 (unitless number)</div> 
<div class="d">This div element has a line-height of normal.</div> 
</body> 
</html>

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *