CSS Height and Width Property Tutorial For Beginners
CSS height property
CSS height property allows you to configure height of an element, there are many variants of CSS height property. Let us discuss them one by one and see their usage.
The height property is used to apply height of an element.
Suppose we want to set height 400px to an element with class “test” then we will apply following rule.
CSS Min Height
The min-height property is used to declare the minimum height of an element. Suppose I do not want an element to be smaller in height then a defined pixel then I will use min-height property with the height property. It will apply two rules for the element, i.e. the element cannot be smaller than min-height value and the default height will be borrowed from the height property.
Suppose we want our element to capture 80% of our screen area and also when the screen size is small it should not shrink more than 100 pixels then we will apply the following rule.
CSS Max Height
The max-height property is used to declare the maximum height of an element. For instance suppose I have an image that is of 800px width and 600px height now I do not want it to over stretch to prevent it from breaking in pixels. So I will use the max-height property with value 600px. This will allow me to set a rule that will stop the image from getting larger height than 600px.
Suppose we want our element to have a maximum height of 1024 pixel and a minimum height of 600px and also it to have a height 80% of screen height then we will apply the following rules.
CSS Line Height
The line-height property is a very handy property for text styling, it allows us to set height for a line of text, which allows us to let set the gap between every line of paragraph as per our needs.
Suppose we want to have a gap of 100px between each sentence of paragraph elements then will use the following rule
CSS Width property
CSS width property allows you to configure width of an element, there are many variants of CSS width property. Let us discuss them one by one and see their usage.
The CSS width property allows us to set width of an element.
Suppose we want to set width 600px to an element with class “test” then we will apply following rule.
CSS Min Width
The min-width property is used to declare the minimum width of an element. Let us assume we want to retain a minimum width and do not compress itself more than the expected pixel then we will use the min-width CSS property. It will not let the element get compressed more than our allotted min-width value. The min width can be used with the CSS width property.
Suppose we want to have a minimum width to our element and doesn’t want it to shrink more than 100 pixels and also on larger screens we want it to have 50% width then we will apply the following rule to that element.
CSS Max Width
The max-width property is used to declare the maximum width of element same as the max-width property. It restricts an element from exceeding the width more than it is allowed by the rule of max width.
Suppose we want our element to have a width of 50% and not to shrink more than 100 pixel with that we also want it not to expand more than 600 pixels then we will use the following rule.