مفهوم مارجین و پدینگ و بوردر

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) قرار دهید.