Dimensions

Dimensions

In CSS, “dimension” helps us to change the height and width properties of an element. Dimension is only used to set the height and the width of the element and not for the spacing and padding works. We can declare the height with pixel (px) or the per cent value (%).
E.g., height: 100px;     width: 20 %;
We can also add background colour for the element using “background-color: blue.”

The following properties can be used to change the dimensions:-

  • height: specifies the height of an element
  • width: specifies the width of an element

The height and width have some properties too:-

  • auto: Calculate the size according to the default browser.
  • length: For the height of the element in pixels or per cent.
  • % - Use to define the height and width properties in per cent form.
  • initial: Default height and width value.
  • inherit: Value of height and width will be inherited from its parent class.

CSS provides us with the attribute to set the height and the width to the maximum and minimum:-

  • max-height: specifies the maximum height of an element
  • min-height: specifies the minimum height of an element
  • max-width: specifies the maximum width of an element
  • min-width: specifies the minimum width of an element

NOTE: If you use max-height and height attribute for the same element and the assigned value of max-height is smaller than the value you assigned to the height attribute, then the max-height attribute will play the role on a priority basis. So, it does not matter if your assigned height is greater than max-height; max-height will be implemented by default.

For padding and borders works, we need to define the different attributes, and it will not fall under the category of dimensions.

  • max-height : specifies the maximum height of an element
  • min-height : specifies the minimum height of an element
  • max-width: specifies the maximum width of an element
  • min-width : specifies the minimum width of an element

Example:

<html> <html lang="en-US"> <style> div { height: 200px; width: 50%; background-color: powderblue; } </style> </head> <body> <h2>Knowledge2life</h2> <div>Online learning website</div> </body> </html>

OUTPUT:

Knowledge2life

Online learning website