به سایت ما خوش آمدید . امیدوارم لحظات خوشی را درسایت ما سپری نمایید .

خوش آمدید

هر گونه نظر و پیشنهاد و انتقادی داشتید، در قسمت نظرات اعلام کنید.

موضوعات

 

با استفاده از ویژگی margin-top می توان عرض فضای خارجی سمت بالای عنصر را تنظیم کرد.

قبل از بررسی این ویژگی باید با Box Model در سی اس اس آشنا باشیم تا نواحی مختلف هر عنصر را بشناسیم.

ادامه مطلب
کسب درآمد

 

در مثال زیر فاصله هر آیتم لیست را از آیتم بالای خود 20 پیکسل قرار داده ایم:

 


li {
  margin-top: 20px;
}

 

نتیجه بصورت زیر خواهد بود:

 
margin-top
 

 

مقادیر ویژگی margin-top

 


margin-top: <length> | <percentage> | auto | inherit

 

 

مقدار طولی

به کمک واحدهای مطلق و نسبی می توان به این ویژگی مقدار داد.

 


margin-top: 100px;
margin-top: 4rem;
margin-top: 10vh;
margin-top: 100cm;

 

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

 

مقدار درصدی

اگر از مقادیر درصدی استفاده کنیم مرورگر مقدار را نسبت به عرض نگهدارنده یا همان پدر عنصر تعیین می کند.

 


.dad {
  width: 100px;
}

.dad .boy {
  margin-top: 10%; /* 10px */
}

 

 

auto

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

توجه داشته باشید که مقدار auto برای این ویژگی بستگی به ویژگی های دیگری دارد که به عنصر داده می شود که در مطالب آینده با آنها آشنا خواهیم شد.

 

inherit

با استفاده از کلمه کلیدی inherit مقدار این ویژگی عنصر برابر با مقدارش برای پدر عنصر خواهد بود.

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

 
دموی زیر را بررسی کنید و با تغییر مقادیر و واحدها به درک موضوع کمک کنید:

 

 

 
 



کسب درآمد
دوشنبه 15 آبان 1396  - 10:15 AM

جستجو

آمار سایت

کل بازدید : 183821
تعداد کل پست ها : 1817
تعداد کل نظرات : 4
تاریخ ایجاد بلاگ : یک شنبه 4 مرداد 1394 
آخرین بروز رسانی : سه شنبه 15 خرداد 1397 

نویسندگان

س . م

امکانات جانبی