ਬੋਕਸ ਮਾਡਲ: CSS ਬਾਹਰੀ ਮਾਰਜਿਨ

ਐਲੀਮੈਂਟ ਦੇ ਬਾਹਰੀ ਫਰੇਮ ਦੇ ਚੱਕਰ ਵਾਲੇ ਖਾਲੀ ਖੇਤਰ ਬਾਹਰੀ ਮਾਰਜਿਨ ਹੈ। ਬਾਹਰੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰਨ ਨਾਲ ਐਲੀਮੈਂਟ ਬਾਹਰ ਵਿੱਚ ਅਤਿਰਿਕਤ 'ਖਾਲੀ ਸਥਾਨ' ਬਣਾਉਂਦਾ ਹੈ。

ਬਾਹਰੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਸਰਲ ਤਰੀਕਾ ਮਾਰਜਿਨ ਪ੍ਰਤੀਯੋਗ ਦੀ ਇਸਤੇਮਾਲ ਕਰਨਾ ਹੈ, ਇਹ ਪ੍ਰਤੀਯੋਗ ਕਿਸੇ ਲੰਬਾਈ ਇਕਾਈ, ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਜਾਂ ਨਕਾਰਾਤਮਕ ਮੁੱਲ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ。

CSS margin ਪੈਰਾਮੀਟਰ

ਬਾਹਰੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਸਰਲ ਤਰੀਕਾ ਇਸਤੇਮਾਲ ਕਰਨਾ ਹੈ ਮਾਰਜਿਨ ਪ੍ਰਤੀਯੋਗ.

ਮਾਰਜਿਨ ਪ੍ਰਤੀਯੋਗ ਕਿਸੇ ਲੰਬਾਈ ਇਕਾਈ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ, ਇਹ ਪਿਕਸਲ, ਇੰਚ, ਮਿਲੀਮੀਟਰ ਜਾਂ em ਹੋ ਸਕਦਾ ਹੈ.

ਮਾਰਜਿਨ ਨੂੰ auto ਸੈਟ ਕਰ ਸਕਦੇ ਹਾਂ। ਸਭ ਤੋਂ ਆਮ ਕੰਮ ਵਜੋਂ ਮਾਰਜਿਨ ਲਈ ਲੰਬਾਈ ਮੁੱਲ ਸੈਟ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਹੇਠ ਲਿਖੀ ਐਲਾਨ ਹੀ ਹੀ h1 ਐਲੀਮੈਂਟ ਦੇ ਹਰ ਪਾਸੇ 1/4 ਇੰਚ ਚੌਕ ਦਾ ਖਾਲੀ ਸਥਾਨ ਸੈਟ ਕਰਦੀ ਹੈ:

h1 {ਮਾਰਜਿਨ : 0.25in;}

ਹੇਠ ਦਾ ਉਦਾਹਰਣ h1 ਐਲੀਮੈਂਟ ਦੇ ਚਾਰ ਪਾਸੇ ਵਾਲੇ ਵਿਸ਼ੇਸ਼ ਬਾਹਰੀ ਮਾਰਜਿਨ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਇਸਤੇਮਾਲ ਕੀਤੀ ਗਈ ਲੰਬਾਈ ਇਕਾਈ ਪਿਕਸਲ (px) ਹੈ:

h1 {ਮਾਰਜਿਨ : 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 مقادیر برای حاشیه‌های بیرونی مشخص شده باشد، مقادیر چهارم (یعنی حاشیه‌های چپ بیرونی) از مقادیر دوم (یعنی حاشیه‌های راست بیرونی) کپی می‌شود. اگر دو مقادیر داده شده باشد، مقادیر چهارم از مقادیر دوم کپی می‌شود، مقادیر سوم (حاشیه‌های پایین بیرونی) از مقادیر اول (حاشیه‌های بالا بیرونی) کپی می‌شود. در آخرین حالت، اگر فقط یک مقادیر داده شده باشد، سایر 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 ਲਿਖਣਾ ਕਾਫੀ ਮੁਸ਼ਕਿਲ ਹੁੰਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਕੇਵਲ ਐਲੀਮੈਂਟ ਦੇ ਇੱਕ ਪਾਸੇ 'ਤੇ ਮਾਰਜਿਨ ਕੰਟਰੋਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇੱਕੀਕ੍ਰਿਤ ਮਾਰਜਿਨ ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਤੋਂ ਕਰੋ。

ਇੱਕੀਕ੍ਰਿਤ ਮਾਰਜਿਨ ਵਿਸ਼ੇਸ਼ਤਾ

ਤੁਸੀਂ ਸਿੱਧੇ margin ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ (ਜਿਸ ਵਿੱਚ ਕਈ auto ਲਿਖਣਾ ਹੁੰਦਾ ਹੈ), ਪਰ ਤੁਸੀਂ ਹੀ margin-left ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਜੇਕਰ ਤੁਸੀਂ p ਐਲੀਮੈਂਟ ਦੇ ਖੱਬੇ ਮਾਰਜਿਨ ਨੂੰ 20px ਸੈਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ।

p {margin-left: 20px;}

ਤੁਸੀਂ ਹਰੇਕ ਪਾਸੇ 'ਤੇ ਮਾਰਜਿਨ ਸੈਟ ਕਰਨ ਲਈ ਇਸ ਵਿੱਚ ਕਿਸੇ ਵੀ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਸ ਨਾਲ ਸਾਰੇ ਹੋਰ ਮਾਰਜਿਨ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਹੋਣਗੇ:

ਇੱਕ ਨਿਯਮ ਵਿੱਚ ਕਈ ਅਜਿਹੇ ਏਕੀਕ੍ਰਿਤ ਪਾਸੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ:

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

ਕੋਈ ਮੌਕਾ ਹੈ, ਇਸ ਤਰ੍ਹਾਂ ਮਾਰਜਿਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਅਸਾਨ ਹੋ ਸਕਦਾ ਹੈ:

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

ਚੋਣਵੇਂ ਹੋਣ ਦੇ ਨਾਲ ਹੀ, ਮਾਰਜਿਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਤੁਲਨਾ ਵਿੱਚ ਮਾਰਜਿਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਨਤੀਜਾ ਇੱਕ ਹੀ ਹੈ। ਆਮ ਤੌਰ 'ਤੇ, ਜੇਕਰ ਤੁਸੀਂ ਕਈ ਪਾਸੇ 'ਤੇ ਮਾਰਜਿਨ ਸੈਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ margin ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਅਸਾਨ ਹੋਵੇਗਾ। ਪਰ, ਦਸਤਾਵੇਜ਼ ਦਿਖਾਉਣ ਦੀ ਦ੍ਰਿਸ਼ਟੀ ਤੋਂ, ਇਹ ਦੋਵੇਂ ਤਰੀਕੇ ਇੱਕ ਹੀ ਤਰ੍ਹਾਂ ਦਾ ਨਤੀਜਾ ਦੇਣਗੇ, ਇਸ ਲਈ ਆਪਣੇ ਲਈ ਅਸਾਨ ਤਰੀਕੇ ਚੁਣਨਾ ਚਾਹੀਦਾ ਹੈ。

ਸੁਝਾਅ ਅਤੇ ਟਿੱਪਣੀਆਂ

ਸੁਝਾਅ:ਨੈਟਸਕੇਪ ਅਤੇ IE ਨੇ body ਟੈਗ ਲਈ ਡਿਫਾਲਟ ਮਾਰਜਿਨ (ਮਾਰਜਿਨ) ਮੁੱਲ 8px ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਹੈ। ਪਰ ਓਪਰਾ ਇਸ ਤਰ੍ਹਾਂ ਨਹੀਂ ਹੈ। ਉਲਟ ਤੌਰ 'ਤੇ ਓਪਰਾ ਨੇ ਅੰਦਰੂਨੀ ਫਿਲਟਰ (ਪੈਡਿੰਗ) ਦਾ ਡਿਫਾਲਟ ਮੁੱਲ 8px ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਹੈ, ਇਸ ਲਈ ਜੇਕਰ ਤੁਸੀਂ ਪੂਰੇ ਵੈੱਬਸਾਈਟ ਦੇ ਕਿਨਾਰੇ ਹਿੱਸੇ ਨੂੰ ਸੰਤੁਲਿਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਅਤੇ ਇਸ ਨੂੰ ਓਪਰਾ ਵਿੱਚ ਸਹੀ ਤਰ੍ਹਾਂ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ body ਦੇ padding ਨੂੰ ਪਰਿਵਰਤਨ ਕਰਨਾ ਹੋਵੇਗਾ。

CSS ਮਾਰਜਿਨ ਇੰਸਟੈਂਸ

ਟੈਕਸਟ ਦੇ ਖੱਬੇ ਬਾਹਰੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰੋ
本例演示如何设置文本的左外边距。
设置文本的右外边距
本例演示如何设置文本的右外边距。
设置文本的上外边距
本例演示如何设置文本的上外边距。
设置文本的下外边距
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਟੈਕਸਟ ਦੇ ਨੀਚੇ ਬਾਹਰੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰਨ ਦੀ ਪ੍ਰਦਰਸ਼ਨ ਕੀਤੀ ਗਈ ਹੈ。
ਸਾਰੇ ਬਾਹਰੀ ਮਾਰਜਿਨ ਪੈਰਾਮੀਟਰਾਂ ਇੱਕ ਐਲਾਨ ਵਿੱਚ ਹਨ。
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਸਾਰੇ ਬਾਹਰੀ ਮਾਰਜਿਨ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਇੱਕ ਐਲਾਨ ਵਿੱਚ ਸੈਟ ਕਰਨ ਦੀ ਪ੍ਰਦਰਸ਼ਨ ਕੀਤੀ ਗਈ ਹੈ。

CSS ਬਾਹਰੀ ਮਾਰਜਿਨ ਪੈਰਾਮੀਟਰ

ਪੈਰਾਮੀਟਰ ਵਰਣਨ
margin ਸ਼ਾਰਟ ਪੈਰਾਮੀਟਰ।ਇੱਕ ਐਲਾਨ ਵਿੱਚ ਸਾਰੇ ਬਾਹਰੀ ਮਾਰਜਿਨ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਸੈਟ ਕਰੋ。
margin-bottom ਸਥਾਨ ਦੇ ਉੱਪਰ ਬਾਹਰੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰੋ。
margin-left ਸਥਾਨ ਦੇ ਉੱਪਰ ਬਾਹਰੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰੋ。
margin-right ਸਥਾਨ ਦੇ ਉੱਪਰ ਬਾਹਰੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰੋ。
margin-top ਸਥਾਨ ਦੇ ਉੱਪਰ ਬਾਹਰੀ ਮਾਰਜਿਨ ਸੈਟ ਕਰੋ。