Hello guys! evening and welcome to this section of my tutorial on CSS. In my previous tutorial i talked about CSS outlines, i hope you guys understood the tutorial post very well?
In this tutorial i want to talk about CSS dimension, without wasting much time, lets get down to business.
You have seen the border that surrounds every box i.e. element, the padding that can appear inside each box, and the margin that can go around them. In this tutorial, we will learn how to change the dimension of boxes.
Below are the list of properties that allow you to control the dimension of a box.
- The height property is used to set the height of a box.
- The width property is used to set the width of a box.
- The line-height property is used to set the height of a line of text.
- The max-height property is used to set the maximum height that a box can be.
- The min-height property is used to set the minimum height that a box can be.
- The max-width property is used to set the maximum width that a box can be.
- The min-width property is used to set the minimum width that a box can be.
The Height and Width Properties
The height and width properties allows you to set the height and width for elements. They can take values of a length, a percentage, or the keyword auto.
Below is an example:
<html>
<head>
</head>
<body>
<p style="height: 80px; width: 300px; border: 1px solid red; padding: 3px; margin: 8px;">
This paragraph is 80pixels high and 300pixels wide.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="height: 80px; width: 300px; border: 1px solid red; padding: 3px; margin: 8px;">
This paragraph is 80pixels high and 300pixels wide.
</p>
</body>
</html>
You can also read our tutorial post on: Css outline
The line-height Property
The line-height property allows you to increase the space between lines of text. The value of line-height property can be a number, a length, or a percentage.
Below is an example:
<html>
<head>
</head>
<body>
<p style="height: 80px; width: 300px; border: 1px solid red; padding: 3px; margin: 8px; line-height: 20px;">
This paragraph is 80pixels high and 300pixels wide and a line height of 20 pixels.
</p>
</body>
</html
<head>
</head>
<body>
<p style="height: 80px; width: 300px; border: 1px solid red; padding: 3px; margin: 8px; line-height: 20px;">
This paragraph is 80pixels high and 300pixels wide and a line height of 20 pixels.
</p>
</body>
</html
The max-height Property
The max-height property allows you to specify the maximum height of an element. 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.
Below is an example:
<html>
<head>
</head>
<body>
<p style="max-height: 30px; width: 300px; border: 1px solid red; padding: 3px; margin: 8px;">
This paragraph is 300pixels wide and max height is 30px.
This paragraph is 300pixels wide and max height is 30px.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="max-height: 30px; width: 300px; border: 1px solid red; padding: 3px; margin: 8px;">
This paragraph is 300pixels wide and max height is 30px.
This paragraph is 300pixels wide and max height is 30px.
</p>
</body>
</html>
You can also read our tutorial post on: Css cursor
The min-height Property
The min-height property allows you to specify the manimum height of an element. 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.
Below is an example:
<html>
<head>
</head>
<body>
<p style="min-height: 15px; width: 300px; border: 1px solid red; padding: 3px; margin: 8px;">
This paragraph is 300pixels wide and min height is 15px.
This paragraph is 300pixels wide and min height is 15px.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="min-height: 15px; width: 300px; border: 1px solid red; padding: 3px; margin: 8px;">
This paragraph is 300pixels wide and min height is 15px.
This paragraph is 300pixels wide and min height is 15px.
</p>
</body>
</html>
The max-width Property
The max-width property allows you to specify the maximum width of an element. 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.
Below is an example:
<html>
<head>
</head>
<body>
<p style="max-width: 120px; height: 80px; border: 1px solid red; padding: 3px; margin: 8px;">
This paragraph is 80pixels high and max width is 120px.
This paragraph is 80pixels high and max width is 120px.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="max-width: 120px; height: 80px; border: 1px solid red; padding: 3px; margin: 8px;">
This paragraph is 80pixels high and max width is 120px.
This paragraph is 80pixels high and max width is 120px.
</p>
</body>
</html>
You can also read our tutorial post on: DATA TYPE PART TWO
The min-width Property
The min-width property allows you to specify the manimum width of an element. 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.
Below is an example:
<html>
<head>
</head>
<body>
<p style="min-width: 50px; height: 80px; border: 1px solid red; padding: 3px; margin: 8px;">
This paragraph is 80pixels high and min width is 50px.
This paragraph is 80pixels high and min width is 50px.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="min-width: 50px; height: 80px; border: 1px solid red; padding: 3px; margin: 8px;">
This paragraph is 80pixels high and min width is 50px.
This paragraph is 80pixels high and min width is 50px.
</p>
</body>
</html>
Alright guys, we have come to the end of this tutorial on CSS dimension. Feel free to ask your questions in any area you don't understand properly, and your questions will be attended to as soon as possible.
Like our facebook page and subscribe with us to get our tutorial posts delivered directly to your emails. Also share this tutorial post on the various social media platforms available.
You can follow us on twitter
You can also follow us on pinterest