css

صفت margin – آموزش CSS

صفت margin هم یکی از پرکار بردترین صفات در css است. در این بخش به آموزش این صفت می پردازیم.


با استفاده از این صفت فاصله ی بیرونی یک عنصر را با عناصر دیگر مشخص می کنید. وقتی شما یک متنی در سایت قرار می دهید، علاوه بر فضایی که خود متن اشغال کرده سه بخش دیگر نیز اشغال شده است. البته این سه بخش به طور پیش فرض مقدار 0 را دارند. این سه به ترتیب عبارت اند از padding و border و margin.

margin

همان طور که می بینید فاصله ی خارجی میان یک عنصر با عناصر دیگر را با صفت margin مشخص می کنیم. شما می توانید با قرار دادن مقدار دل خواهتان در جلوی صفت برای دور تا دور ( هر چهار طرف ) عنصرتون فاصله ای را مشخص کنید.

در این صفت نیز می توان برای هر قسمت (هر طرف) به صورت جداگانه مقداری را مشخص کرد برای این کار از صفات زیر استفاده می شود.

الف ) margin-bottom

ب ) margin-left

پ ) margin-right

ت ) margin-top

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

شما برای این که میزان کد هاتون کم تر بشود می توانید به شکل دیگری نیز مقدار دهی کنید. با نوشتن دو مقدار در جلوی صفت، مقدار اول برای بالا و پایین و مقدار دوم برای سمت چپ و راست در نظر گرفته می شود. برای مشخص کردن مقدار ها می توانید از px, pt, cm و یا از % استفاده کنید. همچنین می توانید با قرار دادن auto تایین مقدار را به خود مرورگر واگذار کنید.

برای روشن تر شدن نحوه ی مقداردهی به مثال های زیر توجه کنید.

.margin{
   margin:10px; // برای هر چهار طرف اعمال میشود 
   margin:10px 20px;// بالا و پایین 10 ،چپ و راست 20 پیکسل
   margin:auto; // توسط حود مرور گر مشخص میشود
   margin:10px 5px 20px 0px;// بالا 10 راست 5 پایین 20 و سمت چپ 0 پیکسل
}

.marginone{
margin-bottom:5px ;// فقط پایین عنصر
margin-left:6px ;// فقط سمت چپ عنصر
margin-right:7px ;// فقط سمت راست عنصر
margin-top:1px ;// فقط بالای عنصر
}

Related Articles

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این مطلب را از دست ندهید!

Close
Close