آموزش CSS | قسمت نهم ( مارجین CSS )

تاریخ: چهارشنبه, 26 شهریور 1399

---

---

سلام به همراهان همیشگی کلاس برتر ، در این قسمت از آموزش CSS قرار است شما رو با نحوه کارکرد مارجین ، در استایل بخشیدن به فایل HTML آشنا کنیم ؛ با ما همراه باشید.

 

 

مارجین ها در CSS

     از خصوصیات margin در CSS برای ایجاد فضای اطراف عناصر ، خارج از هر مرز مشخص شده استفاده می شود.

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

 

---

مارجین های فردی

CSS ویژگی هایی برای تعیین حاشیه ( مارجین ) برای هر طرف یک عنصر دارد :

• حاشیه – بالا
• حاشیه – راست
• حاشیه – پایین
• حاشیه - چپ

تمام حاشیه ها می توانند خصوصیات مقادیر زیر را داشته باشند :

• auto – مارجین پیش فرض مرورگر را محاسبه می کند
• length - یک حاشیه در px ، pt ، cm و etc مشخص می کند.
• ٪ - یک حاشیه در درصد عرض عنصر مشخص می کند
• Heritage - مشخص می کند که حاشیه باید از عنصر والد به ارث برسد

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

 

مثال :

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

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

امتحان کنید

 

---

مارجین - مختصر نویسی

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

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

• حاشیه – بالا
• حاشیه – راست
• حاشیه – پایین
• حاشیه - چپ

بنابراین ، نحوه کار آن به این شکل است :

 

 

اگر ویژگی margin چهار مقدار داشته باشد :

• margin: 25px 50px 75px 100px;
  

• مارجین بالا 25 پیکسل
• مارجین راست 50 پیکسل
• مارجین پایین 75 پیکسل
• مارجین چپ 100 پیکسل

 

مثال :

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

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

امتحان کنید

 

اگر ویژگی margin دارای سه مقدار باشد :

• margin: 25px 50px 75px;

• مارجین بالا 75 پیکسل
• مارجین راست و چپ 50 پیکسل
• مارجین پایین 75 پیکسل

 

مثال :

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

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

امتحان کنید

 

اگر ویژگی margin دارای دو مقدار باشد :

• margin: 25px 50px;

• مارجین بالا و پایین 25 پیکسل
• مارجین راست و چپ 50 پیکسل

 

مثال :

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

p {
  margin: 25px 50px;
}

امتحان کنید

 

 

اگر ویژگی margin دارای یک مقدار باشد :

• margin: 25px;

• مارجین از هر طرف 25 پیکسل است.

 

مثال :

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

p {
  margin: 25px;
}

امتحان کنید

 

---

مقدار خودکار

می توانید خاصیت margin را به صورت خودکار تنظیم کنید تا عنصر درون آن به صورت افقی قرار گیرد .

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

 

مثال :

استفاده از حاشیه خودکار :

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

امتحان کنید

 

---

مقدار ارثی

این مثال اجازه می دهد تا مارجین سمت چپ عنصر <p class = "ex1"> را از عنصر والد (<div>) به ارث برسد :

 

مثال :

استفاده از مقدار ارثی

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

p.ex1 {
  margin-left: inherit;
}

امتحان کنید

 

امیدوارم این مطلب هم برای شما مفید بوده باشد ؛ خوشحال میشیم اگر نظر یا انتقادی درید در زیر این مطلب برای ما به اشتراک بگذارید . موفق باشید

:

---

---