The CSS Dimension Properties

If you want to make adjustments or to set the height and the width of the element that you are working on then it is the CSS dimension properties that you need to tweak a bit.

The CSS Dimension Properties

There are several things that you can adjust using the CSS dimension properties.

  • height
  • max-height
  • max-width
  • min-height
  • min-width
  • width

Now we would be looking more deeply within each property and how you can adjust them.

CSS Height Property

This property is used for setting the height of the element on a page. Keep in mind that the height property does not include the values for the padding, the margin and the border. Here is an example of a code for the height property:

p.ex

{

height:200px;

width:200px;

}

 

CSS Width Property

This property is used for setting the width of the element on a page. The width property does not include the values for the padding, the margin and the border. Here is an example of a code for the width property:

p.ex

{

height:200px;

width:200px;

}

 

The Max Height Property

This is the CSS property that sets the maximum height of an element. Here is a sample code for setting the mx height of an element:

p
{
max-height:60px;
}

In this example, the max height that has been set is 60 pixels.

The Min Height Property

The min height property is the property used in defining the minimum height that would be used for an element on a page that you are working on. This is usually defined using pixels as a measurement for the height of the element. One thing that you need to remember is that in setting the min height of the element, it would not affect the height of the border, the padding and the margin that surrounds it. Here is an example code showing how the min height can be defined for a sheet:

p

{

min-height:200px;

}

 

In this example, the minimum height set for the element is 200 pixels.

The Max and Min Width Properties

These properties are used for defining the maximum and the minimum width that can be used for the elements. As with the height properties, it only affects the actual elements. It would have no bearing at all on the border, the margin or the padding that surrounds the element. So when you are setting the min and max width, you just have to consider the element itself. Here is an example of a code setting the max-width property:

p

{

max-width:100px;

}

 

In this example the max width has been set at 200 pixels. Now here is a sample code that sets the minimum width of an element:

p

{

min-height:50px;

}

 

In this example the minimum height of the element has been defined to be at 50 pixels.

The dimension properties of the CSS are some of the most basic properties that you should learn to use. It can be very useful in making the sheet look like the way that you wanted it.