So if I ask you, what do you mean by dimension? so what answer you will and which answer you most prefer? Hmmm, maybe your answer will – I know but can’t explain?? Before going to CSS Dimension property, we have to know about Dimensions.
Dimension:- Dimension is nothing, but it indicates direction and with the help of direction, we move towards and put the flag on the surface. In other words, Dimensions is a part of the element that shows how much size the user prefers for an element or how the maximum size is set to an element.
CSS Dimension Property
Table of Contents
CSS Dimension property allows us to specify the size of an element and maximum and minimum size of an element. CSS Dimension Property is used as height and width property for an element in CSS, but this is more balanced instead of set to the height and width.
OK, I can understand, if you are a beginner for CSS, you have trouble on the above paragraphs, that is not for beginners. But don’t worry, the below paragraphs only for beginners.
In this CSS Post, we will see that, how to specify and control the dimension of an element or element box.
we have the following CSS Dimension properties to specify and control the size or dimension of an element. Those properties are the listed below –
- The height property is used to set the height of the box.
- The width property is used to set the width of the box.
- The line-height property is used to set the height of the line of the text.
- The max-height property is used to set the maximum height of the box that a box can be.
- The min-height property is used to set the minimum height of the box that a box can be.
- The max-width property is used to set the maximum width of the box that a box can be.
- The min-width property is used to set the minimum width of the box that a box can be.
The Height and Width Properties
The height and width properties allow you to set the height and width for boxes. They can take values of a length, a percentage, or the keyword auto.
Here is an example −
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
</body>
</html>
it will provide following result.
The line-height Property
The line-height property allows you to increase the space between lines of text. The value of the line-height property can be a number, a length, or a percentage.
Here is an example −
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
</p>
</body>
</html>
It will produce the following result −
The max-height Property
The max-height property allows you to specify maximum height of a box. The value of the max-height property can be a number, a length, or a percentage.
NOTE − This property does not work in either Netscape 7 or IE 6.
Here is an example −
<html>
<head>
</head>
<body>
<p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<br>
</body>
</html>
The min-height Property
The min-height property allows you to specify minimum height of a box. The value of the min-height property can be a number, a length, or a percentage.
NOTE − This property does not work in either Netscape 7 or IE 6.
Here is an example −
<html>
<head>
</head>
<body>
<p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
</body>
</html>
it will provide following result.
The max-width Property
The max-width property allows you to specify maximum width of a box. The value of the max-width property can be a number, a length, or a percentage.
NOTE − This property does not work in either Netscape 7 or IE 6.
Here is an example −
<html>
<head>
</head>
<body>
<p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
</body>
</html>
it will provide following result.
The min-width Property
The min-width property allows you to specify minimum width of a box. The value of the min-width property can be a number, a length, or a percentage.
NOTE − This property does not work in either Netscape 7 or IE 6.
Here is an example −
<html>
<head>
</head>
<body>
<p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
</body>
</html>
it will provide following result.
Last words: This is it, for now, it is a series of CSS(Cascading Style sheet) online tutorial for the beginners. I hope you have to enjoy my post. you can learn various programming languages on this site and can also read tech posts.
CSS Full Course Table Chart – Click here
