CSS – فاصله‌های بیرونی (Margins)

در اینجا خواص مربوط به حاشیه (Margins) در CSS به صورت متنی و بدون استفاده از جدول توضیح داده شده‌اند:

  1. margin: یک خاصیت shorthand است که برای تنظیم تمام مقادیر حاشیه‌ها (بالا، راست، پایین، چپ) به کار می‌رود. می‌توان این خاصیت را با استفاده از ۱ تا ۴ مقدار مشخص کرد. به عنوان مثال، margin: 25px 50px 75px 100px; به ترتیب حاشیه‌های بالا، راست، پایین و چپ را تنظیم می‌کند.

  2. margin-bottom: این خاصیت برای تنظیم حاشیه پایین یک عنصر استفاده می‌شود.

  3. margin-left: این خاصیت برای تنظیم حاشیه چپ یک عنصر استفاده می‌شود.

  4. margin-right: این خاصیت برای تنظیم حاشیه راست یک عنصر استفاده می‌شود.

  5. margin-top: این خاصیت برای تنظیم حاشیه بالای یک عنصر استفاده می‌شود.

مقادیر معتبر برای خاصیت‌های حاشیه:

  • auto: مرورگر به طور خودکار مقدار حاشیه را محاسبه می‌کند.
  • length: طول مشخصی مانند px، em، cm و غیره را برای حاشیه مشخص می‌کند.
  • %: مقدار حاشیه را به صورت درصدی از عرض عنصر والد تعیین می‌کند.
  • inherit: مقدار حاشیه را از عنصر والد به ارث می‌برد.

مقادیر shorthand:

  1. اگر خاصیت margin دارای یک مقدار باشد، آن مقدار برای تمام جهات (بالا، پایین، چپ، راست) اعمال می‌شود.
  2. اگر دو مقدار داشته باشد، اولین مقدار برای بالا و پایین و دومین مقدار برای چپ و راست اعمال می‌شود.
  3. اگر سه مقدار داشته باشد، اولین مقدار برای بالا، دومین مقدار برای چپ و راست و سومین مقدار برای پایین اعمال می‌شود.
  4. اگر چهار مقدار داشته باشد، به ترتیب برای بالا، راست، پایین و چپ اعمال می‌شود.

مقدار auto:

این مقدار اغلب برای قرار دادن عناصر به صورت افقی در مرکز استفاده می‌شود. به عنوان مثال:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

مقدار inherit:

این مقدار باعث می‌شود که یک عنصر حاشیه خود را از عنصر والدش به ارث ببرد. به عنوان مثال:

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.