با استفاده از ویژگی margin-right
می توان عرض فضای خارجی سمت راست عنصر را تنظیم کرد.
قبل از بررسی این ویژگی باید با Box Model در سی اس اس آشنا باشیم تا نواحی مختلف هر عنصر را بشناسیم.
در مثال زیر فاصله هر آیتم لیست را از آیتم سمت راست خود برابر با 20 پیکسل قرار داده ایم:
li {
margin-right: 20px;
}
نتیجه بصورت زیر خواهد بود:
مقادیر ویژگی margin-right
margin-right: <length> | <percentage> | auto | inherit
مقدار طولی
به کمک واحدهای مطلق و نسبی می توان به این ویژگی مقدار داد.
margin-right: 100px;
margin-right: 4rem;
margin-right: 10vh;
margin-right: 100cm;
مقدار اولیه این ویژگی 0 است به این معنی که هیچ فاصله خارجی به صورت پیشفرض برای عنصر وجود ندارد.
مقدار درصدی
اگر از مقادیر درصدی استفاده کنیم مرورگر مقدار را نسبت به عرض نگهدارنده یا همان پدر عنصر تعیین می کند.
.dad {
width: 100px;
}
.dad .boy {
margin-right: 10%; /* 10px */
}
auto
این مقدار به مرورگر اجازه می دهد تا بصورت خودکار فاصله را تنظیم کند. که البته برای margin-right
معمولا برابر با صفر خواهد بود یا اینکه باعث می شود تا عنصر تا جایی که امکان دارد به سمت چپ حرکت کند.
توجه داشته باشید که مقدار auto
برای این ویژگی بستگی به ویژگی های دیگری دارد که به عنصر داده می شود که در مطالب آینده با آنها آشنا خواهیم شد.
در مطلب مربوط به ویژگی margin در این مورد بیشتر بحث می کنیم.
inherit
با استفاده از کلمه کلیدی inherit
مقدار این ویژگی عنصر برابر با مقدارش برای پدر عنصر خواهد بود.
این ویژگی مقدار منفی نیز می پذیرد که باعث می شود عنصر بجای چپ به سمت راست حرکت کند.
البته مقدار منفی عنصر را از flow عادی آن خارج می کند. و با این کار می توان حتی دو عنصر را روی هم قرار داد. توجه داشته باشید که استفاده از margin
منفی توصیه نمی شود.
سوال داری؟ برو به پنل پرسش و پاسخ