CSS – فاصلههای بیرونی (Margins)
در اینجا خواص مربوط به حاشیه (Margins) در CSS به صورت متنی و بدون استفاده از جدول توضیح داده شدهاند:
-
margin: یک خاصیت shorthand است که برای تنظیم تمام مقادیر حاشیهها (بالا، راست، پایین، چپ) به کار میرود. میتوان این خاصیت را با استفاده از ۱ تا ۴ مقدار مشخص کرد. به عنوان مثال،
margin: 25px 50px 75px 100px;
به ترتیب حاشیههای بالا، راست، پایین و چپ را تنظیم میکند. -
margin-bottom: این خاصیت برای تنظیم حاشیه پایین یک عنصر استفاده میشود.
-
margin-left: این خاصیت برای تنظیم حاشیه چپ یک عنصر استفاده میشود.
-
margin-right: این خاصیت برای تنظیم حاشیه راست یک عنصر استفاده میشود.
-
margin-top: این خاصیت برای تنظیم حاشیه بالای یک عنصر استفاده میشود.
مقادیر معتبر برای خاصیتهای حاشیه:
- auto: مرورگر به طور خودکار مقدار حاشیه را محاسبه میکند.
- length: طول مشخصی مانند px، em، cm و غیره را برای حاشیه مشخص میکند.
- %: مقدار حاشیه را به صورت درصدی از عرض عنصر والد تعیین میکند.
- inherit: مقدار حاشیه را از عنصر والد به ارث میبرد.
مقادیر shorthand:
- اگر خاصیت
margin
دارای یک مقدار باشد، آن مقدار برای تمام جهات (بالا، پایین، چپ، راست) اعمال میشود. - اگر دو مقدار داشته باشد، اولین مقدار برای بالا و پایین و دومین مقدار برای چپ و راست اعمال میشود.
- اگر سه مقدار داشته باشد، اولین مقدار برای بالا، دومین مقدار برای چپ و راست و سومین مقدار برای پایین اعمال میشود.
- اگر چهار مقدار داشته باشد، به ترتیب برای بالا، راست، پایین و چپ اعمال میشود.
مقدار auto:
این مقدار اغلب برای قرار دادن عناصر به صورت افقی در مرکز استفاده میشود. به عنوان مثال:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
مقدار inherit:
این مقدار باعث میشود که یک عنصر حاشیه خود را از عنصر والدش به ارث ببرد. به عنوان مثال:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام