این آموزش در تاریخ ۱۴۰۰/۱۱/۰۶ آپدیت شده است.
آموزش ویژگی margin در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی margin در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی margin در CSS
با استفاده از ویژگی margin در CSS میتوان بطور کلی یک فضای خالی ( فاصله ) را در اطراف یک تگ ایجاد و یا تعریف کرد، و همچنین از این ویژگی برای خلاصه نویسی ویژگی های زیر مورد استفاده قرار میگیرد :
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی margin را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : ایجاد فاصله در ۴ طرف تگ بصورت مجزا ( از سمت بالا ، راست، پایین و چپ )
|
1 2 3 4 5 6 |
.mytext{ margin-top:50px; margin-right:50px; margin-bottom:50px; margin-left:50px; } |
مثال شماره ۲ : وسط قرار دادن عکس در صفحه با استفاده از ویژگی Margin ( باید مارجین سمت راست و چپ رو auto قرار بدیم تا یه عنصر بتونه وسط قرار بگیره )
|
1 2 3 4 5 |
.MyImage{ margin-right:auto; margin-left:auto; display:block; } |
مثال شماره ۳ : استفاده از ۴ مقدار مجزا برای ۴ جهت
- بالا ۸۰ پیکسل
- راست ۱۰ پیکسل
- پایین ۶۰ پیکسل
- چپ ۷۰ پیکسل
|
1 2 3 |
.mytext{ margin:80px 10px 60px 70px; } |
مثال شماره ۴ : فقط راست و چپ
- بالا نداره
- راست ۴۰ پیکسل
- پایین نداره
- چپ ۱۰۰ پیکسل
|
1 2 3 |
.mytext{ margin:0 40px 0 100px; } |
مثال شماره ۵ : فقط بالا و پایین
- بالا ۱۰۰ پیکسل
- راست نداره
- پایین ۱۰۰ پیکسل
- چپ نداره
|
1 2 3 |
.mytext{ margin:100px 0 100px 0; } |
مثال شماره ۶ : استفاده از ۱ مقدار برای ۴ طرف ( یعنی در مثال زیر ۱۰۰ پیکسل برای ۴ طرف اعمال میشه )
- بالا ۱۰۰ پیکسل
- راست ۱۰۰ پیکسل
- پایین ۱۰۰ پیکسل
- چپ ۱۰۰ پیکسل
|
1 2 3 |
.mytext{ margin:100px; } |
Free-Learn
جدول مشخصات ویژگی margin در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | ۰ |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS1 |
| نحوه استفاده در جاوااسکریپت | object.style.margin=”2px 3px 4px 5px”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی margin در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| margin | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
margin: length|auto|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی margin در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| length | استفاده از واحدهای اندازه گیری مثه PX و.. ( آموزش واحدهای اندازه گیری در CSS ) ( مقادیر منفی مجاز می باشد ) ( مقدار پیشفرض : ۰ ) |
| auto | مرورگرها بصورت خودکار اندازه مارجین را مشخص میکنند |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
فروپاشی یا Margin Collapsing
خب این فروپاشی یا Margin collapsing یعنی چی!؟ وقتی ۲ عنصر زیر هم ( بصورت افقی ) قرار داشته باشند و هردوشون هم از ویژگی مارجین ( فقط مارجین بالا – top و پایین – bottom ) استفاده کرده باشن اینجا دیگه مقدار Margin هر دو عنصر شکسته میشه و تقریبا میشه گفت باهم ادغام میشن که به اصطلاح میگن Collapsing
یعنی اگه مثلا به عنصر a مارجین پایین با مقدار ۱۰۰ پیکسل بدیم :
|
1 |
margin-bottom: 100px; |
و به عنصر b مارجین بالا با مقدار ۵۰ پیکسل بدیم :
|
1 |
margin-top: 50px; |
خب طبیعتا چون ۱۰۰ پیکسل عنصر a از سمت پایین داره و ۵۰ پیکسلم عنصر b از سمت بالا داره ، پس سرجمع باید ۱۵۰ پیکسل فاصله یا فضای خالی وسط عناصر a و b ایجاد بشه.
ولی اینجوری نمیشه ! از سمت پایین عنصر a و سمت بالای عنصر b ( ینی بین این ۲ عنصر ) نهایت اندازه ۱۰۰ پیکسل فضای خالی ایجاد میشه ، و میتونیم بگیم اون ۵۰ پیکسل از سمت بالای عنصر b توسط عنصر a خورده ( بلعیده ) میشه و اینجاست که میگن فروپاشی شکل میگیره.
|
1 2 3 4 5 6 7 |
.Box1{ margin-bottom: 100px; } .Box2{ margin-top: 50px; } |
Free-Learn
وقتی مارجین به فرزند میدی و پدرهم تحت تاثیر قرار میگیره
خب این جمله ( وقتی مارجین به فرزند میدی و پدرهم تحت تاثیر قرار میگیره ) یعنی چی؟ یعنی اگه شما به عنصر فرزند مارجین بدید عنصر پدرهم تحت تاثیر همون مقدار مارجین که به فرزند دادید قرار مگیره.
یعنی اگه بصورت زیر داشته باشیم :
|
1 2 3 4 5 6 7 |
.Pedar{ background-color: #607D8B; } .Farzand{ margin: 50px auto; } |
خب ما گفتیم عنصر فرزند از بالا و پایین ۵۰ پیکسل مارجین داشته باشه خب این بکنار کاریش نداریم ولی تو خروجی ۵۰ پیکسل بجای اینکه روی فرزند اعمال بشه روی عنصر پدر اعمال میشه، یعنی این عنصر پدر هست که از بالا ۵۰ پیکسل مارجین میگیره.
حال برای رفع این مشکل باید از ویژگی Padding در عنصر پدر استفاده نماییم :
|
1 2 3 |
.Pedar{ padding: 1px; } |
Free-Learn
نکات و توضیحات
- از مقادیر منفی میتوان در این ویژگی استفاده کرد و مشکلی ندارد.
- برای قرار دادن یک عنصر در وسط صفحه بصورت افقی ، باید مقدار مارجین در سمت راست و چپ رو auto قرار بدیم.
اگر در این ویژگی از ۱ مقدار استفاده نمایید : مثال
|
1 |
margin: 2px; |
یعنی برای ۴ جهت ( بالا – راست – پایین و چپ ) ۲ پیکسل مارجین ایجاد میشود.
اگر در این ویژگی از ۲ مقدار استفاده نمایید : مثال
|
1 |
margin: 2px 3px; |
یعنی مقدار اول برای بالا و پایین و مقدار دوم برای راست و چپ
اگر در این ویژگی از ۳ مقدار استفاده نمایید : مثال
|
1 |
margin: 2px 3px 4px; |
یعنی مقدار اول برای بالا و مقدار دوم برای راست و چپ و مقدار سوم برای پایین
اگر در این ویژگی از ۴ مقدار استفاده نمایید : مثال
|
1 |
margin: 2px 3px 4px 5px; |
یعنی مقدار اول برای بالا و مقدار دوم برای راست و مقدار سوم برای پایین و مقدار چهارم برای چپ
