آشنایی با پدینگ و مارجین و بوردر در طراحی سایت

Padding

فاصله بین محتوا تا مرز عنصر با Padding مشخص می­شود. با اضافه کردن Padding به المان، محتوا فشرده شده و بیم محتوا و لبه­ ها فاصله ایجاد می­ شود. فاصله Padding از ضلع­ های بالا، راست، پایین و چپ(Top, Right, Bottom, Left) است.به ­طور کلی و یا جزء به جزء و با واحد پیکسل(px) تعیین  می شود.

در ویژوال کامپوزر، عنصری که می­خواهید فاصله Padding برای آن قرار دهید را در حالت ویرایش باز کنید و در صفحه تنظیمات المان، سربرگ طراحی، قسمت فاصله را انتخاب کنید. مقدار فاصله Padding را از اطراف مشخص کرده و با واحد پیکسل(px) در جعبه Padding  اضافه کنید. به این ترتیب محتوا از ضلع­ های عنصر به اندازه مقدار Padding  فاصله می­گیرد.

Border

 Border حاشیه و کادر المان را شامل می ­شود و می­توان برای آن ضخامت، نوع و رنگ تعیین کرد.

در صفحه ساز ویژوال کامپوزر، المان را در حالت ویرایش بازکنید.  در صفحه تنظیمات، سربرگ طراحی، قسمت حاشیه را کلیک کنید. استایل حاشیه را انتخاب کنید و در جعبه عرض خط کادر، ضخامت کادر را تعیین نمایید. همچنین می­توانید در جعبه گرد کردن حاشیه میزان گردی زاویه­ های کادر و از جعبه رنگ­ ها، رنگ کادر را مشخص کنید. پس از ذخیره تغییرات، و مشاهده صفحه در مرورگر، خواهید دید، کادر با مقادیر مشخص شده دور تا دور المان اضافه شده است.

 Margin

Margin فضای خارجی محتوا تا مرز عناصر و همچنین فاصله بین عناصر را شامل می­شود. فاصله Margin از ضلع­های بالا، پایین، راست و چپ(Top, Right, Bottom, Left) به­ طور کلی و یا جزء به جزء و با واحد پیکسل(px) تعیین می­شود.

برای اضافه کردن فاصله Margin به عنصر در وردپرس، المان را در حالت ویرایش قرار دهید. در صفحه ردیف تنظیمات، سربرگ طراحی و بخش فاصله را انتخاب کنید و مقدار موردنظر Margin را در قسمت margin با درج واحد پیکسل  (px) قرار دهید.ه کردن فاصله Margin به عنصر در وردپرس، المان را در حالت ویرایش قرار دهید. در صفحه ردیف تنظیمات، سربرگ طراحی و بخش فاصله را انتخاب کنید و مقدار موردنظر Margin را در قسمت margin با درج واحد پیکسل  (px) قرار دهید.