فلم نمونہ: CSS بیرونی فضائیابی

عنصر کی بورڈر کے گرد کا خالی علاقہ بیرونی فضائیابی ہوتا ہے۔ بیرونی فضائیابی کو سیٹ کرنا عنصر کے باہر اضافی 'خالی علاقہ' بناتا ہے۔

بیرونی فضائیابی کو سیٹ کرنے کا سادہ ترین طریقہ یہ ہے کہ margin کا حوالہ استعمال کیا جائے، جس میں کسی بھی طوالتی اکائی، فیصد کا حوالہ یا منفی اعداد کو قبول کرتا ہے۔

CSS margin ویژگی

بیرونی فضائیابی کو سیٹ کرنے کا سادہ ترین طریقہ یہ ہے کہ margin کا حوالہ.

margin کا حوالہ کسی بھی طوالتی اکائی کو قبول کرتا ہے، جو پیکسل، انچ، میل یا em ہو سکتی ہے۔

margin کو auto کا مقصد رکھا جا سکتا ہے۔ زیادہ مشہور طریقہ یہ ہے کہ بیرونی فضائیابی کا مقصد طوالتی اعداد کا استعمال کیا جائے۔ نیچل اعلان میں h1 عناصر کی تمام جانبوں پر 1/4 انچ کی باریک فضائیابی کو مقصد رکھا گیا ہے:

h1 {margin : 0.25in;}

مثال کے تحت، h1 عناصر کی چار جانب کو مختلف بیرونی فضائیابی کا تعین کیا گیا ہے، استعمال ہونے والی طوالتی اکائی پیکسل (px) ہے:

h1 {margin : 10px 0px 15px 5px;}

مانند تنظیمات حاشیه داخلی، ترتیب این مقادیر از حاشیه بیرونی بالا (top) شروع شده و به دور از عنصر به سمت چپ می‌چرخد:

margin: top right bottom left

علاوه بر این، می‌توانید یک مقادیر درصدی برای margin تنظیم کنید:

p {margin : 10%;}

درصد‌ها بر اساس width والدین محاسبه می‌شوند. در این مثال، حاشیه بیرونی پاراگراف p بر اساس 10% width والدین تنظیم شده است.

مقادیر پیش‌فرض margin 0 است، بنابراین اگر مقادیری برای margin تعیین نشده باشد، حاشیه بیرونی ایجاد نمی‌شود. اما در عمل، مرورگرها برای بسیاری از عناصر از قبل طرح‌های پیش‌فرضی ارائه داده‌اند، حاشیه بیرونی نیز از این قاعده مستثنا نیست. به عنوان مثال، در مرورگرهایی که از CSS پشتیبانی می‌کنند، حاشیه بیرونی در بالا و پایین هر عنصر پاراگراف ایجاد می‌شود. بنابراین، اگر حاشیه بیرونی برای عنصر p تعیین نشده باشد، مرورگر ممکن است خودش یک حاشیه بیرونی اعمال کند. البته، اگر شما به طور خاص آن را مشخص کنید، طرح پیش‌فرض پوشیده می‌شود.

کپی کردن مقادیر

یادتان می‌آید؟ ما در دو بخش اول به کپی کردن مقادیر اشاره کرده‌ایم. در اینجا ما به شما نشان می‌دهیم که چگونه از کپی کردن مقادیر استفاده کنید.

گاهی اوقات، ما مقادیر تکراری وارد می‌کنیم:

p {margin: 0.5em 1em 0.5em 1em;}

با کپی کردن مقادیر، شما نیازی به تایپ مجدد این جفت اعداد ندارید. این قانون با قانون زیر برابر است:

p {margin: 0.5em 1em;}

این دو مقادیر می‌توانند جایگزین 4 مقادیر قبلی شوند. این چگونه ممکن است؟ CSS چندین قانون تعریف کرده است که اجازه می‌دهد برای حاشیه بیرونی کمتر از 4 مقادیر مشخص شود. قوانین به شرح زیر است:

  • اگر مقادیر حاشیه بیرونی چپ کمبود داشته باشد، از مقادیر حاشیه بیرونی راست استفاده می‌شود.
  • اگر مقادیر حاشیه بیرونی پایین کمبود داشته باشد، از مقادیر حاشیه بیرونی بالا استفاده می‌شود.
  • اگر مقادیر حاشیه بیرونی راست کمبود داشته باشد، از مقادیر حاشیه بیرونی بالا استفاده می‌شود.

تصویر زیر روشی بیشتر برای درک این موضوع ارائه می‌دهد:

CSS کا مرجع

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

از اسانى مکانیزم، شما باید فقط مقادیر مورد نیاز را مشخص کنید، نه همه 4 مقادیر را، مثلاً:

h1 {margin: 0.25em 1em 0.5em;}	/* بمعنى 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}	/* بمعنى 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* معادل 1px 1px 1px 1px */

این روش یک اشکال کوچک دارد، شما در نهایت با این مشکل مواجه خواهید شد. فرض کنید می‌خواهید حاشیه بالا و چپ عنصر p را به 20 پیکسل تنظیم کنید و حاشیه پایین و راست را به 30 پیکسل تنظیم کنید. در این حالت، باید به این صورت بنویسید:

p {margin: 20px 30px 30px 20px;}

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

بیایید به یک مثال دیگر نگاه کنیم. اگر می‌خواهید به جز حاشیه چپ، همه حاشیه‌های دیگر auto باشند (حاشیه چپ 20px):

p {margin: auto auto auto 20px;}

همانطور که انتظار دارید، شما می‌توانید به این صورت به نتیجه مورد نظر خود برسید. مشکل اینجاست که تایپ این auto کمی مشکل‌آور است. اگر فقط می‌خواهید حاشیه یک‌طرفه عنصر را کنترل کنید، از ویژگی حاشیه یک‌طرفه استفاده کنید.

ویژگی حاشیه یک‌طرفه

شما می‌توانید از ویژگی حاشیه یک‌طرفه برای تنظیم حاشیه یک‌طرفه یک عنصر استفاده کنید. فرض کنید می‌خواهید حاشیه چپ عنصر p را به 20px تنظیم کنید. نیازی به استفاده از margin (که نیاز به تایپ auto دارد) نیست، بلکه می‌توانید از روش زیر استفاده کنید:

p {margin-left: 20px;}

شما می‌توانید از یکی از این ویژگی‌ها برای تنظیم حاشیه مربوط به یک سمت بدون اینکه به طور مستقیم همه حاشیه‌ها را تحت تأثیر قرار دهید استفاده کنید:

می‌توانید از چندین این属性 در یک قوانین استفاده کنید، به عنوان مثال:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

البته، در این حالت، استفاده از margin ممکن است آسان‌تر باشد:

p {margin: 20px 30px 30px 20px;}

همانطور که از یک طرفه استفاده می‌کنید یا از margin استفاده می‌کنید، نتایج یکسان هستند. به طور کلی، اگر می‌خواهید برای چندین حاشیه حاشیه‌گذاری کنید، استفاده از margin آسان‌تر است. اما از دیدگاه نمایش مستند، در واقع از کدام روش استفاده می‌کنید مهم نیست، بنابراین باید روشی را انتخاب کنید که برای شما آسان‌تر باشد.

توجه و نظرات

توجه:نیتسکپ و آئی‌ای مقدار پیش‌فرض حاشیه (مجرد) برای تگ بدی (body) 8px تعریف می‌کنند. اما اپرا اینطور نیست. برعکس، اپرا مقدار پیش‌فرض برای فیلتر داخلی (پدینگ) را 8px تعریف می‌کند، بنابراین اگر می‌خواهید به بخش‌های حاشیه وب‌سایت خود تنظیم کنید و آن‌ها را به درستی در اپرا نمایش دهید، باید پدینگ بدی را شخصی‌سازی کنید.

مثال بیرونی حاشیه CSS:

نویسی کسی کا چپ بیرونی حاشیه
این مثال نشان می‌دهد که چگونه فضای اطراف سمت چپ متن تنظیم می‌شود.
فضای اطراف سمت راست متن تنظیم شود
این مثال نشان می‌دهد که چگونه فضای اطراف سمت راست متن تنظیم می‌شود.
فضای اطراف بالا متن تنظیم شود
این مثال نشان می‌دهد که چگونه فضای اطراف بالا متن تنظیم می‌شود.
فضای اطراف پایین متن تنظیم شود
این مثال نشان می‌دهد که چگونه فضای اطراف پایین متن تنظیم می‌شود.
همه ویژگی‌های فضای اطراف در یک بیانیه.
این مثال نشان می‌دهد که چگونه همه ویژگی‌های فضای اطراف در یک بیانیه تنظیم می‌شوند.

ویژگی فضای اطراف CSS

ویژگی توضیح
margin ویژگی کوتاه‌نویسی. همه ویژگی‌های فضای اطراف در یک بیانیه تنظیم می‌شوند.
margin-bottom فضای اطراف پایین عنصر تنظیم شود.
margin-left فضای اطراف سمت چپ عنصر تنظیم شود.
margin-right فضای اطراف سمت راست عنصر تنظیم شود.
margin-top فضای بیرونی بالا عنصر تنظیم شود.