مدل جعبه ای همراه با margin و padding در CSS
Your browser doesn't support video.
Please download the file: video/mp4
با سلام خدمت شما کاربر محترم وبسایت آموزش برنامه نویسی و همچنین علاقه مندان به آموزش طراحی وب.
در جلسه قبل با آموزش border در css آشنا شدیم. در این جلسه قصد داریم تا با آموزش margin و padding در CSS که یکی از مهمترین و پرکاربردترین و ضمنا آسان ترین مباحث در Css است در خدمت شما باشیم.
مدل جعبه ای در css
قبل از آشنایی با خصوصیات margin و padding در Css و نحوه کار با آنها لازم است تا با مفهوم مدل جعبه ای یا Box Model در css آشنا شوید.
مدل جعبه ای یا Box Model در CSS مجموعه قوانینی هستند که بیان می کنند هر عنصر در صفحه چگونه تعریف شود. CSS هر عنصر (مانند تصویر، جدول، div، پاراگراف و ...) را به عنوان یک "جعبه" با یکسری از ویژگی های مختلف تعیین می کند که این ویژگی ها رفتار عنصر در صفحه را نیز تعیین می کند. تاکنون هر صفحه وب که ساخته شده شامل یکسری از عناصر ارائه شده یکی پس از دیگری و بدون هیچ فاصله ای بین متن و border و بدون هیچ فاصله ای بین یک عنصر با عنصر دیگر بود. مدل جعبه ای در Css ابزاری برای سفارشی کردن این طرح پیش فرض است.
مهمترین وظیفه شما به عنوان یک طراح وب، اعمال قوانین مدل جعبه ای CSS است تا یک طرح ایجاد شده توسط گرافیست را به صفحه وب تبدیل کنید. شاید برای شما سوال باشد که چرا بایستی این قوانین را به جای ارسال یک تصویر بزرگ و غول پیکر از قالب سایت به سرور و فراخوانی یکجای آن توسط کاربر اعمال کنیم؟
جواب اینجاست که اگر محتوای سایت خود را در HTML از یکدیگر جدا نکنید، موتورهای جستجو هیچ راهی برای شناخت ساختار صفحه وب شما پیدا نمی کنند و در ضمن شما هم هیچ راهی برای افزودن انیمیشن های فانتزی یا تعاملی با جاوااسکریپت و CSS نخواهید داشت.
در این بخش از آموزش اصلی ترین جزء از مدل جعبه ای در CSS آموزش داده خواهد شد:
اجزای مدل جعبه ای عبارتند از:
- content
- padding
- border
- margin
به شکل زیر توجه کنید:
لایه اول content یا محتوا که شامل عناصر HTML (عکس، بلاک، متن، پاراگراف، جداول و ...) است که در جلسات قبلی با عناصر HTML آشنا شدیم. اگر به یاد داشته باشید توسط CSS می توانستیم به دور هر یک از عناصر border یا حاشیه تعریف کنیم.
توسط CSS می توانید فاصله بین عنصر (Content) و border را مدیریت کنید که به فاصله این دو padding گفته میشود. همین طور توسط CSS می توانید فاصله بین border تا عنصر بیرونی را نیز مدیریت کنید. به فاصله بیرونی بین border تا عنصر خارجی نیز margin گفته می شود. در ادامه در مورد margin و padding به طور کامل صحبت خواهیم کرد.
خصوصیت margin در CSS
کلمه margin در لغت به معنی "لبه" است. از خصوصیت margin در css می توانید برای ایجاد فاصله در اطراف عناصر خارج از border تعریف شده استفاده کنید. توسط خصوصیت margin در CSS می توان کنترل کامل برای تنظیم فاصله بین border در چهار طرف خارج از عنصر (بالا،راست،پایین و چپ) داشته باشید.
تعریف margin به صورت کلی
در CSS می توانید margin را به صورت کلی برای تمام جهات تعریف کنید.
مقدارهایی که margin در CSS دریافت می کند به شرح زیر است:
- auto: فاصله یا حاشیه توسط مرورگر تعیین ی شود که این اندازه به مرورگر بستگی دارد.
- فاصله: اندازه ای ثابت برای فاصله یا حاشیه انتحاب میشود. (px,pt,em)
- %: مقدار درصدی از عنصر برای تعیین فاصله یا حاشیه در نظر گرفته می شود.
مثال برای margin
در مثال زیر فاصله margin برای تمام جهات در عنصر <div> به اندازه 40px انتخاب می شود.
div {
border: 2px solid red;
width: 300px;
height: 100px;
margin: 40px;
}
خروجی کدهای بالا به صورت زیر میشود:
نکته: خصوصیات width و height اندازه عرض و ارتفاع یک عنصر را مشخص می کند که در جلسات بعدی به طور کامل در مورد آنها صحبت خواهد شد.
تعریف margin به صورت جداگانه:
در CSS می توانید توسط خصوصیات زیر برای هر یک از جهات بالا، راست، پایین و چپ به صورت جداگانه margin تعریف کنید:
- margin-top: تعریف حاشیه خارجی بالا
- margin-right: تعریف حاشیه خارجی راست
- margin-bottom:تعریف حاشیه خارجی پایین
- margin-left: تعریف حاشیه خارجی چپ
مثال برای margin به صورت جداگانه
در مثال زیر برای تگ <div> خصوصیت margin به صورت جداگانه تعریف می کنیم.
div {
border: 2px solid red;
width: 300px;
height: 100px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 50px;
}
خروجی کدهای بالا به صورت زیر میشود:
مختصرنویسی margin:
برای کوتاه شدن کدها می توانید margin در css را به صورت مختصرنویسی تعریف کنید. به این منظور از خصوصیت margin به این صورت استفاده می کنیم:
margin:50px 20px 35px 40px;
حاشیه بالا 50 پیکسل
حاشیه راست 20 پیکسل
حاشیه پایین 35 پیکسل
حاشیه چپ 40 پیکسل
margin:50px 20px 45px;
حاشیه بالا 50 پیکسل
حاشیه راست و چپ 20 پیکسل
حاشیه پایین 40 پیکسل
margin:50px 20px;
حاشیه بالا و پایین 50 پیکسل
حاشیه راست و چپ 40 پیکسل
margin:50px;
حاشیه بالا، راست، پایین و چپ 50 پیکسل
خصوصیت padding در CSS
در CSS padding فاصله بین عنصر و border را تعیین می کند.رنگ پس زمینه این فضا از رنگ پس زمینه عنصر پیروی می کند. در CSS می توانید padding را به صورت کلی برای تمام جهات تعریف کنید.
مقدارهایی که padding در CSS دریافت می کند:
- فاصله (lentgh): اندازه ای ثابت برای فاصله یا حاشیه انتحاب میشود. (px,pt,em)
- %: مقدار درصدی از عنصر برای تعیین فاصله یا حاشیه در نظر گرفته می شود.
مثال برای padding
در مثال زیر فاصله padding برای تمام جهات در عنصر <div> به اندازه 30px انتخاب می شود.
div {
border: 2px solid red;
width: 300px;
height: 100px;
padding: 30px;
}
نکته: خصوصیات width و height اندازه عرض و ارتفاع یک عنصر را مشخص می کند که در جلسات بعدی به طور کامل در مورد آنها صحبت خواهد شد.
تعریف padding به صورت جداگانه:
در CSS می توانید توسط خصوصیات زیر برای هر یک از جهات بالا، راست، پایین و چپ به صورت جداگانه padding تعریف کنید:
- padding-top: تنظیم حاشیه داخلی از بالا
- padding-right: تنظیم حاشیه داخلی از راست
- padding-bottom: تنظیم حاشیه داخلی از پایین
- padding-left: تنظیم حاشیه داخلی از چپ
مثال برای padding به صورت جداگانه
در مثال زیر برای تگ <div> خصوصیت padding رابه صورت جداگانه تعریف می کنیم.
div {
border: 2px solid red;
width: 300px;
height: 100px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 50px;
}
مختصرنویسی padding:
برای کوتاه شدن کدها می توانید padding در css را به صورت مختصرنویسی تعریف کنید. به این منظور از خصوصیت padding به این صورت استفاده می کنیم:
padding:50px 30px 25px 80px;
حاشیه بالا 50 پیکسل
حاشیه راست 30 پیکسل
حاشیه پایین 25 پیکسل
حاشیه چپت 80 پیکسل
padding:50px 30px 25px;
حاشیه بالا 50 پیکسل
حاشیه راست و چپ 30 پیکسل
حاشیه پایین 25 پیکسل
padding:50px 30px;
حاشیه بالا و پایین 50 پیکسل
حاشیه راست و چپ 30 پیکسل
padding:50px;
حاشیه بالا، راست، پایین و چپ 50 پیکسل
نظرات کاربران