آموزش CSS - ابعاد(dimension)

در CSS چندین ویژگی مانند width (عرض)، height (ارتفاع)، max-width (حداکثر عرض) و max-height (حداکثر ارتفاع) و … وجود دارد که به شما امکان می دهد ابعاد یک عنصر را کنترل کنید.

از ویژگی height برای تنظیم ارتفاع یک عنصر استفاده می شود.
ویژگی width برای تنظیم عرض یک عنصر استفاده می شود.
ویژگی line-height برای تنظیم ارتفاع یک خط متن استفاده می شود.
ویژگی max-height برای تعیین حداکثر ارتفاعی که یک عنصر می تواند باشد استفاده می شود.
ویژگی min-height برای تنظیم حداقل ارتفاعی که یک عنصر می تواند باشد استفاده می شود.
ویژگی max-width برای تنظیم حداکثر عرضی که یک عنصر می تواند باشد استفاده می شود.
ویژگی min-width برای تنظیم حداقل عرضی که یک عنصر می تواند باشد استفاده می شود.

ویژگی های ارتفاع و عرض(Height and Width)

ویژگی های ارتفاع و عرض به شما امکان می دهد ارتفاع و عرض عنصر ها را تنظیم کنید. آنها می توانند مقادیر طول، درصد یا auto را بگیرند.

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
عرض این پاراگراف 400 پیکسل و ارتفاع آن 100 پیکسل است
      </p>
   </body>
</html>

ویژگی خط ارتفاع( line-height )

ویژگی line-height به شما امکان می دهد فاصله بین خطوط متن را افزایش دهید. مقدار ویژگی line-height می تواند یک عدد، یک طول یا یک درصد باشد.

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
این پاراگراف 400 پیکسل عرض و 100 پیکسل ارتفاع دارد و در اینجا ارتفاع خط 30 پیکسل است.
این پاراگراف 400 پیکسل عرض و 100 پیکسل ارتفاع دارد و در اینجا ارتفاع خط 30 پیکسل است.      </p>
   </body>
</html>

ویژگی حداکثر ارتفاع(max-height)

ویژگی max-height به شما امکان می دهد حداکثر ارتفاع یک عنصر را مشخص کنید. مقدار ویژگی max-height می تواند یک عدد، یک طول یا یک درصد باشد.

توجه - این ویژگی در Netscape 7 یا IE 6 کار نمی کند.

<html>
   <head>
   </head>  
   <body>
      <p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
         Tعرض پاراگراف او 400 پیکسل و حداکثر ارتفاع آن 10 پیکسل است
عرض این پاراگراف 400 پیکسل و حداکثر ارتفاع آن 10 پیکسل است   
عرض این پاراگراف 400 پیکسل و حداکثر ارتفاع آن 10 پیکسل است
عرض این پاراگراف 400 پیکسل و حداکثر ارتفاع آن 10 پیکسل است      </p>
      <br>
      <br>
      <br>
      <img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
   </body>
</html>

ویژگی حداقل ارتفاع(min-height )

ویژگی min-height به شما امکان می دهد حداقل ارتفاع یک عنصر را مشخص کنید. مقدار ویژگی min-height می تواند یک عدد، یک طول یا یک درصد باشد.

توجه - این ویژگی در Netscape 7 یا IE 6 کار نمی کند.

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
عرض این پاراگراف 400 پیکسل و ارتفاع حداقل 200 پیکسل است        
عرض این پاراگراف 400 پیکسل و ارتفاع حداقل 200 پیکسل است       
عرض این پاراگراف 400 پیکسل و ارتفاع حداقل 200 پیکسل است    
عرض این پاراگراف 400 پیکسل و ارتفاع حداقل 200 پیکسل است      </p>
      <img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
   </body>
</html>

ویژگی حداکثر عرض(max-width )

ویژگی max-width به شما امکان می دهد حداکثر عرض یک عنصر را مشخص کنید. مقدار ویژگی max-width می تواند یک عدد، طول یا درصد باشد.

توجه - این ویژگی در Netscape 7 یا IE 6 کار نمی کند.

<html>
   <head>
   </head>

   <body>
      <p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
      </p>
      <img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
   </body>
</html>

ویژگی حداقل عرض(min-width)

ویژگی min-width به شما امکان می دهد حداقل عرض یک عنصر را مشخص کنید. مقدار ویژگی min-width می تواند یک عدد، یک طول یا یک درصد باشد.

توجه - این ویژگی در Netscape 7 یا IE 6 کار نمی کند.

<html>
   <head>
   </head>

   <body>
      <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         این پاراگراف 100px ارتفاع و حداقل عرض 400px است
        این پاراگراف 100px ارتفاع و حداقل عرض 400px است
      </p>
      <img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
   </body>
</html>

مرزبندی(outlines) - درس قبلی

درس بعدی - نوارهای پیمایش(scrollbars)