حاشیه‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

این عنصر دارای مقدار حاشیه 70px است.[۱]

1 This element has a margin of 70px


حاشیه ها (به انگلیسی: Margins) در CSS

ویژگی‌های margin در CSS برای ایجاد فاصله در اطراف عناصر، بیرون از هرگونه کادر تعریف شده استفاده می‌شوند.

به کمک CSS، کنترل کامل حاشیه ها را در اختیار دارید.ویژگی‌هایی برای تنظیم حاشیه در هر طرف عنصر (بالا، راست، پایین، و چپ) وجود دارد.

حاشیه - جهت‌های منحصر به فرد

CSS ویژگی‌هایی برای مشخص کردن حاشیه هر طرف یک عنصر دارد:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

تمامی ویژگی‌های حاشیه می‌توانند مقادیر زیر را داشته باشند:

  • auto - مرورگر خود مقدار حاشیه را محاسبه می‌کند
  • length - مقدار حاشیه را بر حسب px ,pt ,cm و غیره مشخص می‌کند
  • % - مقدار حاشیه را بر حسب % ای از عرض عنصری که در آن قرار گرفته مشخص می‌کند
  • inherit - مشخص می‌کند که حاشیه می‌بایست از عنصر والد ارث بری کند

نکته:مقادیر منفی مجاز هستند.

مثال

حاشیه های متفاوتی برای همه چهار طرف عنصر <p> تنظیم می کند:

1 p {
2   margin-top: 100px;
3   margin-bottom: 100px;
4   margin-right: 150px;
5   margin-left: 80px;
6 }


حاشیه - ویژگی مختصر

برای کوتاه سازی کد، این امر ممکن است که تمامی ویژگی‌های حاشیه را در یک ویژگی مشخص کرد.

ویژگی margin یک ویژگی مختصر برای ویژگی‌های حاشیه ای مجزای زیر است:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

بنابراین، شیوه کار به این صورت است:

اگر ویژگی margin چهار مقدار داشته باشد:
  • مقدار فاصله از بالا ۲۵ پیکسل است
  • مقدار فاصله از راست ۵۰ پیکسل است
  • مقدار فاصله از پایین ۷۵ پیکسل است
  • مقدار فاصله از چپ ۱۰۰ پیکسل است
margin: 25px 50px 75px 100px;

مثال

از ویژگی مختصر حاشیه با چهار مقدار استفاده می کند:

p {
  margin: 25px 50px 75px 100px;
}



اگر ویژگی margin سه مقدار داشته باشد:
  • مقدار فاصله از بالا ۲۵ پیکسل است
  • مقدار فاصله از راست (به انگلیسی: right margin) و چپ ۵۰ پیکسل است
  • مقدار فاصله از پایین ۷۵ پیکسل است
margin: 25px 50px 75px;

مثال

از ویژگی مختصر حاشیه با سه ویژگی استفاده می کند:

p {
  margin: 25px 50px 75px;
}



اگر ویژگی marginدو مقدار داشته باشد:
  • مقدار فاصله از بالا (top margin) و فاصله از پایین ۲۵ پیکسل است
  • مقدار فاصله از سمت راست (به انگلیسی: right margin) و فاصله از سمت چپ ۵۰ پیکسل است
margin: 25px 50px;

مثال

استفاده از ویژگی کوتاه شده margin با دو مقدار:

p {
  margin: 25px 50px;
}



اگر ویژگی marginیک مقدار داشته باشد:
  • تمامی چهار margin مقدار ۲۵ پیکسل دارند
margin: 25px;

مثال

از ویژگی کوتاه شده margin با یک مقدار استفاده می‌کند:

p {
  margin: 25px;
}


مقدار auto

می‌توانید مقدار ویژگی حاشیه را برابر با auto قرار دهید تا عنصر را بصورت وسط چین در داخل ظرف (Container) آن قرار دهد.

در این صورت عنصر میزان عرض مشخص شده را اشغال کرده، و فضای باقی مانده به‌طور مساوی بین حاشیه های چپ و راست تقسیم خواهد شد.

مثال

استفاده از margin: auto

1 div {
2   width: 300px;
3   margin: auto;
4   border: 1px solid red;
5 }


مقدار Inherit (به فارسی: ارث‌بری)

در این مثال به حاشیه سمت چپ (به انگلیسی: left margin) عنصر <p class=”ex1”> از عنصر والد (<div>) خود ارث بری می‌کند:

مثال

استفاده از مقدار inherit:

1 div {
2   border: 1px solid red;
3   margin-left: 100px;
4 }
5 
6 p.ex1 {
7   margin-left: inherit;
8 }



منابع آموزشی