درحال بارگذاری

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

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

نویسنده: محمدرضا نامور... بازیدها: 591 - نظرات : 0 دسته بندی: برنامه نویسی تحت وب


سلام به همراهان همیشگی کلاس برتر ، در این قسمت از آموزش 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;
}

امتحان کنید

 

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

:


نویسنده: محمدرضا نامور... بازیدها: 591 - نظرات : 0 دسته بندی: برنامه نویسی تحت وب

جستجو
کلاس برتر
ارائه دهنده بهترین و به روز ترین ویدیو های و مقالات آموزشی و همچنین مقالات مختلف در رابطه با تکنولوژی ،معماری ،مدیریت و سایر رشته های کاربردی.ما برای شما بهترین ها را میخواهیم.

سایر خدمات مجموعهخدمات زیر تحت مدیریت برد تخصصی ارائه می شود.
طراحی وب سایت
راه اندازی و پشتیبانی شبکه
هوشمند سازی منازل
افزایش کارایی نیرو انسانی
تعمیرات دستگاه های الکترونیکی
طراحی داخلی
تبلیغات فضای مجازی
برنامه نویسی