Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Exploring CSS Dimensions Properties

This article will cover the different types of CSS dimensions properties. I will explain height, width, max-height, max-width, line-height properties using some examples

Introduction:

This tutorial will help you to understand various CSS dimensions and the technicalities of setting the dimension around different objects, for example, height and width of element. A subsection of this tutorial will cover the technique for determining maximum and minimum height/width for an element.

CSS dimension properties allows us to set various dimension across the HTML elements which includes defining the height, width and space. Various dimension properties are: height, line-height, max-height, min-height, width, min-width and max-width. Each property will be dealt separately.

Height Property:

This property is used to set height of box or any other HTML element. It is used for rendering images or setting height to any HTML element. The possible values that can be used are:

  • Auto method: When developers do not wish to define value for height, it is determined by browser. Hence, by default height is set automatically set by differently by different browsers
  • Percentage method: The definition of height in percentage with regard to the parent object is done by using Percentage Method.
  • Length method: This defines the height in an absolute scale such as centimeter, millimeter or pt. Sometimes we use relative units such as em or px

Following example will show you how to set height of HTML elements.

Listing 1: Script of Height Property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img.firstattribute
{
height:auto;
float:left;
margin:5px;
}
img.secondattribute
{
height:120px;
float:left;
margin:5px;
}
img.thirdattribute
{
height:60px;
float:left;
margin:5px;
}
</style>
</head>
<body>
<h3> Example of setting height to Image HTML element</h3>
<img class='imagem_artigo' class="firstattribute" src="image1.jpg" height="84" /> <br />
<img class='imagem_artigo' class="secondattribute" src="image1.jpg"  height="84" /> <br />
<img class='imagem_artigo' class="thirdattribute" src="image1.jpg"  height="84" /> <br />
<img class='imagem_artigo' class="secondattribute" src="image1.jpg"  height="84" /> <br />
<img class='imagem_artigo' class="firstattribute" src="image1.jpg"  height="84" /> <br />
</body>
</html>
 
Above figure is example of height scripts which adds different heights to image. Example contains the different attribute values to set height

Figure 1: Above figure is example of height scripts which adds different heights to image. Example contains the different attribute values to set height.

Width Property:

Width property is used to set width of box or any other HTML element, often used for rendering images. We use following properties for setting width:

  • Length- Specifying length along with units if measure.
  • Percentage-A percentage of the width in regard to the parent element.
  • Auto-Allows the user-agent to set the width based on inheritance and pre-set user-agent rules.
  • Inherit-rarely used property that allows the element to have the same width setting as the parent.

Listing 2: Script to setting width to element

<html>
<body>
<p style="width:170px; ;border:3px solid green;
             padding:5px; margin:3px;">
   Paragraph Width - 170px 
</p>
<p style="width:220px; ;border:4px solid red;
             padding:7px; margin:5px;">
 Paragraph Width - 220px 
</p>
<p style="width:330px; ;border:6px solid blue;
             padding:9px; margin:7px;">
 Paragraph Width - 330px 
<p style="width:410px; ;border:8px solid pink;
             padding:10px; margin:9px;">
 Paragraph Width - 410px .
</p>
</p>
</body>
</html>
 
above figure is example of setting a particular width to an HTML element which sets different width to paragraph box

Figure 2: above figure is example of setting a particular width to an HTML element which sets different width to paragraph box.

Max-Height Property:

The max-height property allows you to specify maximum height of a box. The value of the max-height property may range from a number, length, to percentage. Not to forget that the max-height property does not work either in Netscape 7 or IE 6. Following program will compile the idea of setting max-height.

Listing 3: Script of Max-Height

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="width:900px; max-height:60px;border:6px solid green;
             padding:10px; margin:20px;">
This is CSS dimension tutorial.</br>
This is CSS dimension tutorial.</br>
This is CSS dimension tutorial.</br>
This is CSS dimension tutorial.</br>
This is CSS dimension tutorial.</br>
This is CSS dimension tutorial.</br>
</p>
</body>
</html> 
Above figure is output of setting max-height to a box. Similar technique is used for setting minimum height which specifies minimum height of a box. The value of the min-height property also can be a number, a length, or a percentage.

Figure 3: Above figure is output of setting max-height to a box. Similar technique is used for setting minimum height which specifies minimum height of a box. The value of the min-height property also can be a number, a length, or a percentage.

Max-width property:

The max-width property allows you to specify maximum width of a box. The value of the max-width property like max-height property may vary from number, length, to percentage. This property also does not work either in Netscape 7 or IE 6. Following program will compile the idea of setting max-width property.

Listing 4: Script of max-width property

<html>
<body>
<p style="max-width:200px; height:100px;border:10px solid red;
             padding:8px; ">
This paragraph max width is 200px and 100px high.</p>
</body>
</html> 
Above figure is output of max-width property which defines a particular width to a box.  Same concept is used for setting minimum width which specifies minimum width to a box. The value of the min-width property also can be a number, a length, or a percentage.

Figure 4: Above figure is output of max-width property which defines a particular width to a box. Same concept is used for setting minimum width which specifies minimum width to a box. The value of the min-width property also can be a number, a length, or a percentage.

Line-Height Property:

In addition to above discussed properties there is one more property known as line-height property. This property is used to set the height of a line in a text i.e. this property allows you to increase the space between lines of text or to set the distance between two adjacent lines. The distance is between the baselines of the adjacent lines. The value of the line-height property can be normal, number, length or percentage which is explained below. A) Normal - This sets the line height to the default or inherited value based on the font size of the element. B) Number - This sets the line height of the current font-size to be multiplied by a specified number. C) Length - This sets a fixed distance between the lines. The units used are: em, px, cm or pt. D) Percentage - This sets the line height in percentage to the element's font size. Following example will clear the concept.

Listing 5: Script of line-height property

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> <p style="width:500px; height:200px;border:6px solid green;
             padding:6px; margin:15px;line-height:80px;">
500 pixels wide:
200 pixels height:
line height is 80pixels:
</p>
 </h1>
</body>
</html>
 
Above figure is output of script of line-height property which is used to set the height in a line of text

Figure 5: Above figure is output of script of line-height property which is used to set the height in a line of text

Conclusion

This article covered all aspects related to CSS dimensions. I would suggest go through the examples given with this post and try to implement in a project. If you get any question, comment at Mrbool site, we are always ready to answer your queries.



I am Software Developer from India. I hold B.Tech. in Computer Science & Engineering. I am having 2+ years experience of developing Web applications and Websites using HTML, JavaScript, CSS, C#.NET etc..

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login