صفت margin

صفت margin

توسط / CSS / چهارشنبه, 15 شهریور 1396 ساعت 10:52

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

با استفاده از این صفت فاصله ی بیرونی یک عنصر را با عناصر دیگر مشخص می کنید. وقتی شما یک متنی در سایت قرار می دهید، علاوه بر فضایی که خود متن اشغال کرده سه بخش دیگر نیز اشغال شده است. البته این سه بخش به طور پیش فرض مقدار 0 را دارند. این سه به ترتیب عبارت اند از padding  و border و 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 ;// فقط بالای عنصر
}

 

 

نویسنده

حسین منتظرتبریزی

حسین منتظرتبریزی

دانشجوی رشته ی نرم افزار علاقه مند به برنامه نویسی ،بازی سازی و طراحی سایت

نظر دادن

جهت شرکت در دوره  رایگان  7 اصل مدیریت مطلوب کسب و کار لطفا نام و ایمیل خود را وارد نمایید


ایران آکادمی را در شبکه های مجازی دنبال کنید:

کلیه حقوق مادی و معنوی این وب سایت متعلق به ایران آکادمی می‌باشد. قوانین این وب سایت، مبتنی بر قوانین جاری جمهوری اسلامی ایران است. © ۱۳۹۶

Please publish modules in offcanvas position.