آموزش ویژگی margin در css

تاریخ : 2020-09-08 بازدید : 151 دسته بندی : مقالات
آموزش ویژگی margin در css

آموزش ویژگی margin در css

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

اگر قصد یادگیری طراحی وب را دارید و در اول مسیر یادگیری هستید ، باید بدانید که ویژگی margin در طراحی وب بسیار استفاده می شود.
در این مقاله قصد داریم تا شما را با ویژگی margin در css آشنا کنیم. همچنین مثال هایی را برای شما در این مقاله جای داده ایم . در انتهای مقاله  یک منبع برای تمرین را به شما معرفی خواهیم کرد. تا به خوبی به این مبحث مسلط شوید.
ویژگی margin در css ، به معنی فضای بیرونی عنصر نسبت به عناصر دیگر در صفحه ی وب است. وقتی که شما ویژگی margin در css را برای یک عنصر فراخوانی می کنید با مقدار دهی به صورت عددی مثلا 25px مشخص می کنید عنصر مورد نظر شما 25 پیکسل نسبت به عناصر مجاور آن فاصله داشته باشد. همچنین فضای margin رنگ خاصی ندارد. فقط فاصله ی بیرونی عنصر را تعیین می کند.

آموزش ویژگی margin در css

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

فراخوانی margin

برای اینکه این ویژگی را برای یک عنصر خاص فراخوانی کنید . ابتدا باید آن عنصر را با یکی از روش های نام عنصر ، id عنصر و یا نام کلاس آن عنصر ،‌ فراخوانی کنید. سپس در بین دو آکولاد {} کد css مورد نظر خودتان را بنویسید.
به مثال زیر توجه کنید :‌

.row{
    margin : 15px;
}

 

در مثال بالا گفته ایم که آن عنصری که کلاس آن برابر مقدار row است را انتخاب کن. سپس ویژگی margin آن را برابر عدد 15 پیکسل قرار بده.

 

#wrapper{
       margin:8px;
}

 

در مثال بالا گفته ایم که آن عنصری را که ویژگی id آن برابر wrapper است را انتخاب کن. سپس مقدار آن را برابر 8 پیکسل قرار بده.

p{
   margin : 16px;
}

 

در این مثال نیز عنصر p  را انتخاب کرده ایم. سپس ویژگی margin را برای آن برابر مقدار 16 پیکسل قرار داده ایم .

برای هر جهت از عنصر می توانید margin مخصوص به آن را نیز تعیین کنید. برای مثال margin-right مشخص می کند که عنصر مورد نظر از سمت راست چه فاصله ای نسبت به عنصر سمت راست خود داشته باشد.

مثال : 

#list{
     margin-top:7px;
     margin-right:15px;
     margin-bottom:25px;
     margin-left:10px;
}

 

در مثال بالا تعریف کرده ایم که عنصری انتخاب شود که id آن برابر list باشد . سپس ویژگی margin را برای هر یک از جهت های بالا ، راست ، پایین و چپ تعریف کرده ایم که چه مقداری باشد.

فاصله ی بیرونی از سمت بالا: 7 پیکسل

فاصله ی بیرونی از سمت راست : 15 پیکسل

فاصله ی بیرونی از سمت پایین : 25 پیکسل

فاصله ی بیرونی از سمت چپ :10 پیکسل

به این ترتیب می توانیم به صورت جداگانه هر یک از جهت را جداگانه مقدار دهی کنیم . البته این گونه کد نوشتن باعث نوشتن کدهای اصافی می شود. حجمم کدهایتان را نیز هم بالا می برد. معمولا از خلاصه نویسی برای ویژگی margin استفاده می کنیم.

برای خلاصه نویسی در ویژگی margin باید مقادیر را به ترتیب از بالا ،‌ راست ، پایین و چپ بنویسید.

برای مثال : 

.mytag{
     margin: 15px 8px 12px 2px;
}

در مثال بالا تعریف کرده ایم که به ترتیب عنصر مورد نظر ما که کلاس mytag را دارد ، از جهت های بالا ،  راست ، پایین و چپ مقادیر 15 پیکسل ، 8 پیکسل ،‌ 12 پیکسل و 2 پیکسل را داشته باشد .

اگر شما یک مقدار را به ویژگی margin بدهید . این مقدار به تمامی جهت های بالا ، راست ، پایین و چپ اعمال می شود.

اگر دو مقدار بدهید، مقدار اول به جهت های بالا و پایین و مقدار دوم هم به جهت های چپ و راست عنصر اعمال می شود .

برای مثال : 

.mytag{
    margin : 25px 45px;
}

 

اگر سه مقدار بدهید ، مقدار اول برای جهت بالا ، مقدار دوم به جهت راست و چپ عنصر و مقدار سوم به جهت پایین عنصر اعمال خواهد شد.

برای مثال : 

.mytag{ 
     margin : 25px 45px 26px;
 }

 

انواع مقدار دهی margin در css

تا به این جا در مثال ها ، از پیکسل برای مقدار دهی ویژگی margin استفاده کردیم. به غیر از پیکسل می توانید از درصد نیز استفاده کنید . برای مثال به جای 25px از 25% استفاده کنید.

پیشنهادی : آموزش کامل css

 

به غیر از پیکسل و درصد ، گاهی مقدار ویژگی margin را برابر مقدار auto قرار می دهیم. این مقدار به این معنی است که فاصله ی بیرونی عنصر به صورت خودکار و توسط مرورگر تعیین می گردد. auto به معنی خودکار است.

معرفی منبع برای تمرین 

در این مقاله قصد داشتیم تا ویژگی margin در css  را به طور کامل به شما آموزش دهیم . اما برای اینکه تمرین بیشتری را داشته باشید یک منبع را به شما معرفی می کنیم . سایت w3school منبع بسیار خوبی برای تمرین است . همچنین یک ویرایشگر کد آنلاین هم دارد که می توانید به صورت آنلاین نتیجه کد ها را ببینید.

برچسب ها : ,