آموزش ویژگی margin در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی margin در CSS با من همراه باشید.

آموزش ویژگی margin در CSS

Free-Learn

ویژگی margin در CSS

با استفاده از ویژگی margin در CSS میتوان بطور کلی یک فضای خالی ( فاصله ) را در اطراف یک عنصر ایجاد و یا تعریف کرد، و همچنین از این ویژگی برای خلاصه نویسی ویژگی های زیر مورد استفاده قرار میگیرد.

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

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی margin را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : استفاده از ۱ مقدار برای ۴ جهت ( بالا – راست – پایین و چپ )

امتحان کنید

مثال شماره ۲ : استفاده از ۲ مقدار برای ۴ جهت ( مقدار اول برای بالا و پایین و مقدار دوم برای راست و چپ )

امتحان کنید

مثال شماره ۳ : استفاده از ۳ مقدار برای ۴ جهت ( مقدار اول برای بالا ، مقدار دوم برای راست و چپ و مقدار سوم برای پایین )

امتحان کنید

مثال شماره ۴ : استفاده از ۴ مقدار برای ۴ جهت ( مقدار اول برای بالا ، دوم برای راست ، سوم برای پایین و مقدار چهارم برای چپ )

امتحان کنید

مثال شماره ۵ : قرار دادن یک عنصر در وسط صفحه با استفاده از Margin ( باید مارجین سمت راست و چپ رو auto قرار بدیم تا یه عنصر بتونه وسط قرار بگیره )

امتحان کنید

Free-Learn

جدول مشخصات ویژگی margin در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض ۰
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی دارد | اطلاعات بیشتر
نسخه CSS1
نحوه استفاده در جاوااسکریپت object.style.margin=”2px 3px 4px 5px”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی margin در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
margin ۱٫۰ ۱٫۰ ۳٫۵ ۱٫۰ ۶٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی margin در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
length استفاده از واحدهای اندازه گیری همچون px,em و..
( آموزش واحدهای اندازه گیری در CSS )
( مقادیر منفی مجاز می باشد )
( مقدار پیشفرض : ۰ )
auto مرورگرها بصورت خودکار اندازه مارجین را مشخص میکنند.
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

فروپاشی یا  Margin Collapsing

خب این فروپاشی یا Margin collapsing یعنی چی!؟ وقتی ۲ عنصر زیر هم ( بصورت افقی ) قرار داشته باشند و هردوشون هم از ویژگی مارجین ( فقط مارجین بالا – top و پایین – bottom ) استفاده کرده باشن اینجا دیگه مقدار Margin هر دو عنصر شکسته میشه و تقریبا میشه گفت باهم ادغام میشن که به اصطلاح میگن Collapsing

یعنی اگه مثلا به عنصر a مارجین پایین با مقدار ۱۰۰ پیکسل بدیم :

و به عنصر b مارجین بالا با مقدار ۵۰ پیکسل بدیم :

خب طبیعتا چون ۱۰۰ پیکسل عنصر a از سمت پایین داره و ۵۰ پیکسلم عنصر b از سمت بالا داره ، پس سرجمع باید ۱۵۰ پیکسل فاصله یا فضای خالی وسط عناصر a و b ایجاد بشه.

ولی اینجوری نمیشه ! از سمت پایین عنصر a و سمت بالای عنصر b ( ینی بین این ۲ عنصر ) نهایت اندازه ۱۰۰ پیکسل فضای خالی ایجاد میشه ، و میتونیم بگیم اون ۵۰ پیکسل از سمت بالای عنصر b توسط عنصر a خورده ( بلعیده ) میشه و اینجاست که میگن فروپاشی شکل میگیره.

امتحان کنید

Free-Learn

وقتی مارجین به فرزند میدی و پدرهم تحت تاثیر قرار میگیره

خب این جمله ( وقتی مارجین به فرزند میدی و پدرهم تحت تاثیر قرار میگیره ) یعنی چی؟ یعنی اگه شما به عنصر فرزند مارجین بدید عنصر پدرهم تحت تاثیر همون مقدار مارجین که به فرزند دادید قرار مگیره.

یعنی اگه بصورت زیر داشته باشیم :

خب ما گفتیم عنصر فرزند از بالا و پایین ۵۰ پیکسل مارجین داشته باشه خب این بکنار کاریش نداریم ولی تو خروجی ۵۰ پیکسل بجای اینکه روی فرزند اعمال بشه روی عنصر پدر اعمال میشه، یعنی این عنصر پدر هست که از بالا ۵۰ پیکسل مارجین میگیره.

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

امتحان کنید

Free-Learn

نکات و توضیحات

  • از مقادیر منفی میتوان در این ویژگی استفاده کرد و مشکلی ندارد.
  • برای قرار دادن یک عنصر در وسط صفحه بصورت افقی ، باید مقدار مارجین در سمت راست و چپ رو auto قرار بدید، همانند مثال شماره ۵ استفاده نمایید.

اگر در این ویژگی از ۱ مقدار استفاده نمایید : مثال

یعنی برای ۴ جهت ( بالا – راست – پایین و چپ ) ۲ پیکسل مارجین ایجاد میشود.

اگر در این ویژگی از ۲ مقدار استفاده نمایید : مثال

یعنی مقدار اول برای بالا و پایین و مقدار دوم برای راست و چپ

اگر در این ویژگی از ۳ مقدار استفاده نمایید : مثال

یعنی مقدار اول برای بالا و مقدار دوم برای راست و چپ و مقدار سوم برای پایین

اگر در این ویژگی از ۴ مقدار استفاده نمایید : مثال

یعنی مقدار اول برای بالا و مقدار دوم برای راست و مقدار سوم برای پایین و مقدار چهارم برای چپ

Free-Learn

Advertising
دریافت PDF یا پرینت این مطلب