خواص margin و حاشیه عناصر در کدنویسی زبان CSS

با شما همراه هستیم با آموزش متنوع و خوب دیگری از زبان CSS، در این آموزش با خواص margin و حاشیه عناصر و اشیاء یک صفحه ی وبسایت آشنا خواهیم شد.

در این مقاله از سری مطالب آموزش زبان CSS می خواهیم  به خواص margin اشاره کنیم و با این تعاریف به سراغ تغییر در انواع حاشیه های عناصر وبسایت مان بدهیم.

پس با آموزشی دیگر از زبان CSS با کدنویسی به زبان ساده همراه باشید.

آشنایی با خواص margin و کاربردهای آن

تمامی عناصر HTML را میتوان به صورت یک چهار ضلعی یا جعبه ( Box ) در نظر گرفت . برای ایجاد ساختار مناسب در طراحی یک وب سایت این Box ها در کنار یکدیگر قرار خواهند گرفت . مفهوم Box Model در CSS به بررسی خصوصیات و توانایی های این اجزاء ( Box ) می پردازد.

مفهوم یک Box در CSS نشان دهنده محیط اطراف یک عنصر HTML است که دارای خصوصیات Margin , Padding ,Border و محتوا یا Content است.

مفهوم Box Model این توانایی را به ما میدهد تا فاصله محتویات ( Content ) تا خط محیطی ( Border ) را تعیین کنیم ( Padding ) ، ضخامت خط مرز ( Border ) را تعیین کنیم و یا فاصله خارجی یک عنصر HTML را با دیگر عناصر تعیین کنیم ( Margin ) میتوانید در طرح زیر این مفهوم را دقیقتر درک کنید.

حال می خواهیم در این مطلب ابتدا به سراغ خواص margin در طراحی صفحات و استایل نویسی CSS استفاده کنیم.

تعریف : با استفاده از خواص margin در CSS ، می توان فضای خالی به دور عناصر ایجاد کرد. این امکان نیز وجود دارد که با تعیین مقدارهای منفی ، باعث هم پوشانی و تداخل عناصر در یکدیگر شد.

فضای خالی در خارج از محیط Box و مرز Border ، که میتوان اندازه آن را برای ضلع های مختلف ( Top , Right , Bottom ,Left ) به صورت کلی و یا جزء به جزء تعیین نمود.

این فضا دارای رنگ پس زمینه نیست وبه صورت یک فضا با پس زمینه شفاف یا Transparent در فضای اطراف Box قرار میگیرد.

مثال ۱ :

div {
  margin:10px;
  }

مثال ۲ :

div {
  margin-left:10px;
  margin-top:10px;
  margin-right:5px;
  margin-bottom:3px;  
  }

نحوه محاسبه اندازه یک Box

برای طراحی و چینش دقیق اجزاء در طراحی یک صفحه وب ، تمامی اجزاء جزء به جزء با دقت ۱px محاسب میشوند و با توجه به این موضوع نحوه محاسبه اندازه ( Width , Height ) در یک Box بسیار مهم است.

با استفاده از خصوصیات width , height اندازه اجزاء ( Box ) تعیین میگردند ، اما به این نکته توجه کنید که ، در صورت وجود ( Border , Margin , Padding ) فضایی که Box اشغال خواهد کرد با اندازه ای که توسط خصوصیات Width و height تعیین شده است متفاوت خواهد بود.

در واقع با استفاده از width و height تنها اندازه محتوا ( Content ) تعیین شده است و برای محاسبه اندازه واقعی Box ، اندازه ( Padding , Margin , Border ) نیز باید به این اندازه اضافه شوند.

نکته : این نکته مهم را به یاد داشته باشید که ، Padding و Border در اندازه یک Box – Width or Height تاثیر گزار هستند ، این اندازه با استفاده از فرمول زیر محاسبه می شود.

width = width + left padding + right padding + left border + right border 
+ left margin + right margin

height = height + top padding + bottom padding + top border + bottom border
 + top margin + bottom margin

مقادیر مربوط به اندازه حاشیه را می توان به چند صورت زیر تعیین کرد، اما مناسب ترین و متداول ترین شیوه در حالت معمول، تعیین مقادیر به پیکسل (px) است. در مورد مقادیر خواص margin هم می توان از روش های مقدار دهی زیر استفاده کرد.

۱- تعیین مقادیر به پیکسل (picture element) : به فرض ۴px، ۰px و… (پیکسل ها مقادیری ثابت هستند)، از واحد px بیشتر برای نمایش محتوا در صفحه نمایش (مانیتور) استفاده می شود.

۲- تعیین مقادیر به Points : به فرض ۲pt، ۶pt و… (هر pt برابر ۱/۷۲ اینچ است)، از واحد pt بیشتر برای کارهای چاپی استفاده می شود.

۳- تعیین مقادیر به Ems : به فرض ۱em، ۰٫۵em و… (هر em برابر با ۱۶ پیکسل و ۱۲ pt است)، به دلیل قابلیت غیر ثابت و مقیاس پذیر (scalable)، این واحد در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.

۴- تعیین مقادیر به سانتی متر (CentiMeter) : به فرض ۵cm ، ۱۰cm و…، استفاده از این شیوه در وب، چندان مرسوم نیست.

۵- تعیین مقادیر به درصد (Percent) : به فرض %۱۰ ، %۵۰ و…، در این حالت اندازه بلاک با توجه به اندازه صفحه نمایش، مقادیری متغیر خواهد بود؛ این واحد نیز در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.

۶- تعیین مقادیر به صورت خودکار (auto) و حالت وراثتی (inherit) از بلاک والد.

می توان حاشیه دور عناصر را به صورت کلی در خاصیت چند مقداری margin و یا به صورت تکی برای هر یک از جهات ۴ گانه عنصر تعیین کرد.

۱- تعیین به صورت خاصیت چند مقداری

در خاصیت چند مقداری ، ۴ مقدار برای میزان حاشیه در ۴ طرف عنصر به ترتیب زیر تعیین می کنیم :

margin: [ margin top ] [ margin right ] [ margin bottom ] [ margin left ]

مثال : در مثال زیر میزان حاشیه دور عنصر را برای جهت های بالا و پایین ۱۰px و برای جهت های راست و چپ ۲۰px تعیین کرده ایم :

margin : 10px 20px 10px 20px;

۲- تعیین به صورت خاصیت تک مقداری

در این حالت ، میزان حاشیه را در هر طرف به صورت تکی مقدار دهی می کنیم . مجموعه خواص زیر برای تعیین تکی حاشیه به کار می رود :

مثال : در مثال زیر هم به صورت خاصیت چند مقداری و هم به صورت خاصیت تک مقداری margin برای جدول ( Table 2 ) تعیین کرده ایم.

به فاصله آن با جدول دیگر و همچنین خطوط حاشیه جدول اصلی در بر گیرنده مثال دقت کنید :

به صورت خاصیت چند مقداری

< table style="border: solid 2px blue; width: 200px" >
  < tr >
    < td style="border: solid 2px green" >
      Cell 1 , Table 1
    < /td >
  < /tr >
< /table >
< table style="border:solid 2px blue; width:300px; margin:50px 30px 50px 30px">
  < tr >
    < td style="border: solid 2px green" >
      Cell 1 , Table 2
    < /td >
  < /tr >
< /table >

به صورت خاصیت تک مقداری

< table style="border: solid 2px blue; width: 200px" >
  < tr >
    < td style="border: solid 2px green" >
      Cell 1 , Table 1
    < /td >
  < /tr >
< /table >
< table style="border: solid 2px blue; width: 300px; margin-top: 50px;
 margin-right: 30px; margin-bottom: 50px; margin-left: 30px" >
  < tr >
    < td style="border: solid 2px green" >
      Cell 1 , Table 2
    < /td >
  < /tr >
< /table >

تعیین به صورت مقدار منفی ( هم پوشانی و تداخل عناصر )

<table style="border: solid 2px blue; width: 200px">
  < tr >
    < td style="border: solid 2px green" >
      Cell 1 , Table 1
    < /td >
  < /tr >
< /table >
< table style="border: solid 2px blue;
 width: 300px; margin-top: -15px; margin-right: 30px;
 margin-bottom: -10px; margin-left: 30px" >
  < tr >
    < td style="border: solid 2px green" >
      Cell 1 , Table 2
    < /td >
  < /tr >
< /table >

نحوه تعریف ویژگی margin

ویژگی margin را می توان به دو صورت عادی و مختصر تعریف کرد، در شیوه عادی برای کل جهت های بالا، پائین، چپ و راست به صورت یکجا یا جداگانه، margin تعریف می شود، به طور مثال :

.main-block{
margin:auto;
}

مثال بالا به این معنی است که مرورگر مقادیر پیش فرض حاشیه را برای جهت های بالا، پائین، چپ و راست در نظر می گیرد.

و یا :

.main-block {
margin-bottom:4px;
margin-left:2px;
margin-right:2px;
margin-top:4px;
}

و یا :

.main-block {
margin-left:50%;
margin-right:30em;
margin-bottom:20pt;
margin-top:inherit;
}

و همچنین :

.main-block {
margin-right:auto;
margin-left:auto;
}

اما در حالت مختصر نویسی، به جای نوشتن مقادیر و جهت های بالا، پائین، چپ و راست، با نوشتن مقادیر آنها در یک خط، به همان هدف اما با کدنویسی کمتر می رسیم، به فرض :

.main-block {
margin:10px 15px 20px 25px;
}

اعداد در کلاس فوق، به ترتیب نشانگر جهت بالا (top) راست (right) پائین (bottom) و چپ (left) هستند، در واقع مثال برابر است با کد css زیر :

.main-block {
margin-top:10px;
margin-right:15px;
margin-bottom:20px;
margin-left:25px;
}

و همین طور مختصر نویسی به صورت زیر :

.main-block {
margin:10px 15px 20px;
}

برابر است با این کلاس css :

.main-block {
margin-top:10px;
margin-right:15px;
margin-bottom:20px;
margin-left:15px;
}

و همچنین :

.main-block {
margin:10px 15px;
}

برابر است با :

.main-block {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
}

خب در انتهای این مطلب با خواص margin و حاشیه گذاری در زبان CSS آشنا شدیم. در ادامه سری آموزشی استایل دهی به صفحات وب به خواص متنوع و دیگر این زبان برنامه نویسی خواهیم پرداخت.