CSS Width & Height

CSS dimension properties is what you use in order to control and change the width and the height of the elements that are on the page that you are working on. You need to tweak this carefully if you want to achieve the right proportions for the different elements on a page.

The Dimension Properties

The following are the CSS width & height properties:

    • Height property is utilized for defining the height of the element.
    • Width property is utilized for setting the width of the element.
    • Line-height property is useful when it comes to defining the height of a line of text.
    • Max-height property is used in setting the maximum height for a certain element.
    • Min-height is used in defining the lowest possible height for an element.
    • Max-width is the property used for defining the largest width that an element can take up.
    • Min-width is used for defining the lowest width of an element.

The Height and Width Properties

There are three ways that you can set the height and width properties. You can use an actual height measurement, percentage or you can use the word “auto” which means that it will revert to the default value that has been set for the property. Here is an example of this using a height measurement, in this case 200 pixels:

width:200px; height:100px;border:1px solid red;

The Line Height Property

This property is used for defining the space between the lines of text. This is the same with the height and width properties where the property can be set by the actual height, percent value or the default. Here is an example of a code for line height property:

width:200px; height:100px;border:1px solid red;

padding:5px; margin:10px;line-height:30px;

The Maximum and Minimum Height Property

As mentioned earlier the max and min height property are used for setting the highest and the lowest points that can be used for the elements. It can be set using a value or percentage. Here is a good example of a code that sets the maximum height or an element:

width:400px; max-height:10px;border:1px solid red;

padding:5px; margin:10px;

The Maximum and Minimum Height Property

These two properties are set for the determining the widest and the narrowest point for the elements on the web page. Like with the other properties that we have mentioned these properties can be set using different means. You can use a value, an actual height or width in pixels which would be indicated by the code, px. That means 100 pixels should be coded as 100px.

Here is an example of a code that sets that min-height property at 200 pixels:

min-width:200px; height:100px;border:1px solid red;

padding:5px; margin:10px;

The Problem with Different Browsers

There is a problem with CSS though that you have to remember. This problem affects the different properties such as those that set the width and height of the elements. The problem is that different browsers might show the properties differently. In some cases there are browsers that would not support certain properties at all. Netscape 7 or IE 6 for example might not support the height and width properties of CSS.