آموزش کامل CSS – قسمت هشتم: فاصله بین المان ها

همان طور که در قسمت های قبلی آموزش css گفتیم المان های html دارای فاصله ای نامرئی از یکدیگر هستند. این فاصله ها از طریق مارجین اندازه گیری و استفاده می شوند.

مارجین

فرض کنید دو المان داریم که می خواهیم فاصله بین آن ها باشد، در این مواقع از مارجین یا فاصله استفاده می کنیم.

تعریف مارجین: فاصله ای است بین بیرونی ترین سطح هر المان با خارجی ترین سطح المان دیگر.

نحوه اضافه کردن مارجین به المان ها

هر المان می تواند در هر چهار جهت دارای یک فاصله مشخص باشد. اگر بخواهید دور تا دور یک المان از چهار طرف فاصله یکسانی داشته باشد تنها کافی است کلمه margin را نوشته و روبروی آن عدد مورد نظر را بر حسب پیکسل بنویسید.

مثال زیر مارجین از 4 طرف برای یک پاراگراف را مشخص می کند:

p {

margin-top: 100px;

margin-right: 50px;

margin-bottom: 120px;

margin-left: 70px;

}

یک میانبر ساده

کد زیر معادل مثال فوق است:

p {

margin: 100px 50px 120px 70px;

}

اعداد به ترتیب فاصله از بالا، راست، پایین و چپ هستند. همچنین اگر یکی از اعداد را ننویسیم به صورت پیش فرض صفر در نظر گرفته می شود.

نکته: مارجین را می توانیم به تمام المان های html اعمال کنیم.

به عنوان تمرین دو متن و دو جعبه‌ی مستطیلی ایجاد کنید و بین دو جعبه فاصله ۱۰۰ پیکسلی و بین متن‌ها فاصله ۲۰۰ پیکسلی بگذارید.