Css Dimension Property

what is Css dimension:

dimension is synonymous of rate, density, size. By the help of synonymous you can realize the work of css dimension. It mainly works for anything size. You can make something larger or smaller by the css dimension. With some steps I am going to explain about css dimension.

dimension Property:

CSS dimension mainly contain six property  and their value. But the main property is height and width. You can see the all property and values from css dimension property and values.

Set height and width with pixel value:

You can set height and width of a image. Look at the following html doc. This will clear everything about setting height and width of a image.

Example:

<html>

<head>

<style type="text/css">

img.normal{height:auto;}

img.big{height:150px; width:130px;}

</style>

</head>

<body>

<img src="http://h2cweb.net/demo/dimension/android.gif" width="95" height="84" /><br />

<p>This is a small image. </p>

<img src="http://h2cweb.net/demo/dimension/android.gif" width="95" height="84" />

<p>This is bigger than the previous image. </p>

</body>

</html>

   css dimension height and width

Set height and width in percent:

You can set height and width in percent using the css dimension system. If you use 10% , that means that your image is going to 10% larger than the orginal. Look at the following example;

<html>

<head>

<style type="text/css">

img.normal{height:auto;}

img.big{height:20%;width:10%}

img.bigg{height:40%; width:20%;}

</style>

</head>

<body>

<img src="android.gif" width="95" height="84" /><br />

<p>This is orginal image. </p>

<img src="android.gif" width="95" height="84" /><br />

<p>This is 20% heigher and 10% widther than the orginal image. </p>

<img src="android.gif" width="95" height="84" />

<p>This is 40% heigher and 20% widther than the orginal image </p>

</body>

</html>

css dimension height width

 

Maxium height and width :

By this you can mark or indicate a fixed place of web page. Look at the following html syntax;

<html>

<head>

<style type="text/css">

p

{max-height:90px; max-width:750px;

background-color:pink;}

</style>

</head>

<body>

<p> Some word:<br/> Independent, look after, of course, soon, parents, kindness, hospitals, sad, get well, suffer from, a lot of, promise, curious, Bring, Tied, with, come forward, Excited, Return, Finish, Customs, overcrowded, interesting, regularly, a few, serious, fever, weak, welcome, all the time, deep, complaint, all alone, Trap, helpful, friendly, Lonely, prey, request, excuse   ,famous, beside, late, common, around, season, everywhere, must, different, visit, dictionary, fond of, birthday, capital, agriculture, million, population, attractive, peaceful, healthy, handsome, remember, surprised, quickly, imitate, believe, collect, basket, wear, kindly, embrace, prepare, greet, favourite, holiday, parents.</p>

</body>

</html>

css dimension maximum height and width

 

Minimum height and width:

The min-height property used for the minimum height and width of an element. Look at the following syntax;

Minimum height:

<html>

<head>

<style type="text/css">

p

{min-height:100px;

background-color:gray;}

</style>

</head>

<body>

<p>The minimum height of this paragraph is  100px.</p>

</body>

</html>

Minimum width:

<html>

<head>

<style type="text/css">

p

{min-width:150px;

background-color:gray;}

</style>

</head>

<body>

<p>The minimum width is 150px in this paragraph.</p>

</body>

</html>

minimum height css dimension minimum height          minimum widthcss dimension minimum width

Now you can try with the other value of the css dimension property.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.