پدینگ و مارجین در متریال دیزاین بوتسترپ Margin Padding

همانطور که در مقاله قبل قول دادیم اینجا درباره مارجین پدینگ و فاصله گذاری مینویسیم. وقتی میخواهیم فاصله به یک المان داخل صفحه بدهیم کافیست از کلاس های متریال دیزاین بوتسترپ استفاده کنیم. تا به سادگی این فاصله گذاری انجام شود.

علاوه بر این نیازی به حفظ کردن مقدار پیکسلی فاصله نیست. چون با مقدار دهی پیش فرض در متریال دیزاین بوتسترپ در هر کلاس درجه تغییر فاصله 8 پیکسل است. مثلا تفاوت mt-2 با mt-3 یک واحد است که این یک واحد معمولا برابر 8 پیکسل است. با تماشای ویدیو زیر بهتر در جریان قرار میگیرید!

اگر بدون متریال دیزاین بوتسترپ بخواهید مارجین پدینگ بدهید چقدر زمان میبرد؟ تازه ممکن است فاصله ها را به یاد نیاورید و مدام صفحه استایل شیت خود را پر کنید. اینجا با یک کتابخانه از قبل تعریف شده میتواند کار ما را آسان تر از آنچه فکر میکنیم انجام دهد. کلاس های متریال دیزاین بوتسترپ به طرز شگفت انگیزی نامگذاری شده اند تا دقیقا با کمترین حروف یک کلاس با معنی خاصی ایجاد شود و در عین حال در ذهن بماند. هروقت خواستید در گوگل سرچ کنید میتوانید به این صورت عمل کنید! (تصویر زیر)

کلاس های مارجین

مارجین با m و پدینگ با p نمایان میشود. در کدهای زیر کلاس های مارجین را مشاهده میکنید. همانطور که میبینید حرف t به معنی top و حرف b به معنی bottom و حرف l به معنی left و حرف r به معنای right است. با اولین نگاه به حافظه میرود چون حرف اول یادآور باقی کلمه است.

mt-1  => margin-top: 8px
// 
mb-1 => margin-bottom: 8px
//
ml-1 => margin-left: 8px
//
mr-1 => margin-right: 8px
//
mx-1 => margin-right: 8px ; margin-left: 8px;
//
my-1 => margin-top: 8px; margin-bottom: 8px;
//
m-1 => margin: 8px 

درجات 1 تا 5

مارجین های زیر را مشاهده کنید و درجات را ببینید! هر واحد 8 پیکسل است. وقتی دو واحد را استفاده میکنیم میشود 16 پیکسل و به همین ترتیب تا واحد 5 که میشود 40 پیکسل! چقدر منظم هستند!

mt-1  => margin-top: 8px
//  
mt-2  => margin-top: 16px
//  
mt-3  => margin-top: 24px
//  
mt-4  => margin-top: 32px
//  
mt-5  => margin-top: 40px

پدینگ ها نیز همینطور هستند

اگر بجای m از حرف p به معنای padding استفاده کنیم انگاه اعمال میشود. کاملا از قواعد نوشتاری بالا تبعیت میکند.