سلام دوستان، امیدوارم خوب باشید و پر انرژی. امروز قراره یک درس جدید از دوره آموزش رایگان سیر تا پیاز Css رو براتون قرار بدم که مربوط میشه به بحث padding و margin. پدینگ و مارجین درواقع دوتا دستور css خیلی مهم و خیلی پر کاربرد هستن که قطعاً حین طراحی بهشون نیاز پیدا می‌کنید. با اینکه کاربرد این دو دستور مشخصه و خیلی هم ساده است اما خیلی از افراد به خوبی متوجه تفاوت این دوتا دستور نمیشن. به همین دلیل ازتون میخوام یکبار برای همیشه و با دقت این دوتا دستور رو یاد بگیرید. اول از همه بیاید بریم سراغ مارجین (margin).
آموزش استفاده از margin در css:
به بیان خیلی خیلی ساده، مارجین فاصله یک المان با بقیه المان‌های اطرافش رو مشخص میکنه. برای مثال اگه شما و دوستتون کنار هم ایستاده باشید اما بعد دو قدم از دوستتون فاصله بگیرید و دوباره بایستید، مارجین شما و دوستتون، به اندازه دو قدم هست. پس اگه بخواید یک المان در صفحه وب، برای مثال یک متن، یک لینک، یک دکمه و… از بقیه المان‌ها فاصله بگیره، باید از استایل margin برای این المان استفاده کنید. به مثال زیر دقت کنید.
div {
margin: 70px;
}
این دستور باعث میشه تگ div از بالا، پایین، راست و چپ، 70 پیکسل از بقیه المان‌ها فاصله بگیره. ممکنه فقط بخواید تگ div مورد نظر فقط از بالا با بقیه المان‌ها فاصله داشته باشه. و نیازی نباشه که از راست، چپ و پایین از بقیه المان‌ها فاصله بگیره. در اینصورت کافیه به جای استفاده از margin از margin-top استفاده کنیم. به کد زیر دقت کنید.
div {
margin-top: 70px;
}
همچنین درصورتی که بخواید مقدار margin رو برای بالا، پایین، چپ و راست div متفاوت تعریف کنید، کافیه این دستور رو در یک خط بنویسید. به کد زیر دقت کنید. طبق این دستور المان div مورد نظر، 70 پیکسل از بالا، 10 پیکسل از راست، 50 پیکسل از پایین و 10 پیکسل از چپ، از سایر المان‌ها صفحه وب فاصله میگیره.
div {
margin: 70px 10px 50px 10px;
}
آموزش استفاده از padding در css:
فرض کنید یه خونه اجاره کردید که صاحبخونه بهتون گفته هیچ وسیله‌ای رو به دیوار نچسبونید و همه وسایل رو حداقل 10 سانتی متر از دیوار فاصله بدید. در اینصورت میشه گفت adding این خونه 10 سانتی متره. اگه متوجه شده باشید پدینگ فاصله‌ایه که بین محتوای یک المان و مرزهای اون المان وجود داره.
برای مثال اگه شما یک تگ div داشته باشید که یک تگ p درون اون قرار داشته باشه، به طور پیش فرض هیچ فاصله‌ای بین div و p وجود نداره. اما اگه بخواید فاصله‌ای رو بین تگ div و p قرار بدید، باید از پدینگ استفاده کنید. نحوه استفاده از پدینگ دقیقا مثل مارجین هست و می‌تونیم به سه شکل زیر از این دستور استفاده کنیم.
حالت اول: اعمال padding به چار جهت به یک اندازه.
div {
padding: 70px;
}
حالت دوم: اعمال padding به یک جهت، به صورت padding-top، padding-right، padding-left، padding-bottom قابل استفاده هست.
div {
padding-top: 70px;
}
حالت سوم: اعمال padding به صورت inline (در خط).
div {
margin: 70px 10px 50px 10px;
}
جمع بندی:
توی این جلسه درباره padding و margin با هم صحبت کردیم. این دو دستور توی طراحی خیلی پر کاربرد هستن و تقریبا همیشه از این دستورات استفاده می‌کنیم. اگه هرجا رو متوجه نشدید می‌تونید زیر همین پست ازم بپرسید که مثال‌های بیشتری براتون بزنم. موفق باشید 🙂 .
