What are the Dimension Properties in CSS?

**Rob Dizzle** · 29-01-2010

I came to know that we can use the various dimensions of the objects in and around HTML elements by using the CSS. I have just started the CSS and I don't know much about the dimensions. Can anyone explain me what are the Dimension Properties in CSS.?? Also please provide me the proper description about the things that are related with the Dimension Properties. It will be much appreciable if you provide me some CSS code related with the same.!!

**CodGuru** · 29-01-2010

If you want to change the dimensions that means you will have to change the width ,height and defining of the space. The CSS Dimension Properties can be used to set various dimensions of the objects in and around HTML elements. The following are the various dimension properties :

Height
Line-height
Min-height
Max-height
Width
Min-width
Max-width

**Solitario** · 29-01-2010

I also don't have much knowledge about the CSS, but I know about the height of an element. The height of an element specified by the height property. The height takes the following values :

Length - This value defines the height in a relative units or absolute units like cm, mm, in, pt.
Auto - By using this property, the height is determined by the browser.
% - This defines the height in percentage of the height of the parent object.

By default, value for height is auto.
The negative lengths are not allowed.
The following is the CSS code for the Height :

Code:

img {height : 350px ;}

**Deabelos** · 29-01-2010

If you want to set the distance between two adjacent lines, it can be set by using the Line-Height property. The baselines of the adjacent lines is the distance. This property can take the following values :
number - This sets the line height of the current font-size to be multiplied by the number specified.
normal - This property sets the line height to the default or inherited value based on the font size of the element.
length - This sets a fixed distance between the lines. The units used are: em, px, cm, pt.
% - This sets the line height in % of the element's font size.
The following is the CSS code for the same :

Code:

p { line-height : 75 px;}

**kyosang** · 29-01-2010

I have given you the CSS coding for increasing the space between lines :

HTML Code:

<html>
<head>
<style type="text/css">
p.small {line-height: 0.3cm}
p.big {line-height: 0.7cm}
</style>
</head>

<body>
<p>
This is a stanza with a standard line-height.
This is a stanza with a standard line-height.
This is a stanza with a standard line-height.
This is a stanza with a standard line-height.
</p>

<p class="small">
This is a stanza with a smaller line-height.
This is a stanza with a smaller line-height.
This is a stanza with a smaller line-height.
This is a stanza with a smaller line-height.
</p>

<p class="big">
This is a stanza with a bigger line-height.
This is a stanza with a bigger line-height.
This is a stanza with a bigger line-height.
This is a stanza with a bigger line-height.
</p>

</body>
</html>

**void** · 29-01-2010

You can use the width property for setting the width of elements. The following example will describe it more clearly :

HTML Code:

<html> 
<head> 
<title>Setting the width of elements
</title> 
</head> 
<body> 
<table border="3"> 
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr> 
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr> 
</table> 
<table border="3" style="width: 250px;"> 
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr> 
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr> 
</table> 
</body> 
</html>