تنظیم خواص باکس ها Border , Margin , Padding

در CSS، خواص Border، Margin و Padding به طور مستقیم بر روی طراحی و چینش عناصر تاثیر می‌گذارند. در اینجا به بررسی هر یک از این خواص و نحوه استفاده از ان‌ها می‌پردازیم.

۱. ویژگی Border

ویژگی Border برای تعیین حاشیه دور یک عنصر استفاده می‌شود. این ویژگی می‌تواند شامل ضخامت، نوع خط و رنگ باشد.

این بخش یکی از مهمترین اموزش ها ، در سی اس اس و طراحی قالب سایت می باشد. طول یک Element در واقع شامل مجموع مقدار تمامی این ویژگی ها به علاوه طول خود شی می باشد.

برای مثال جمع کل طول یک شی با ویژگی های زیر 300px  می باشد.

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

===  محاسبه کل طول  ====

250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px

تصویر زیر بیانگر کاربرد این ویژگی ها می باشد:

این ویژگی ها برای کسانی که طراحی سایت مبتدی هستند کمی پیچیده است.