مدل فریم: حاشیه CSS
- صفحه قبلی کناره CSS
- صفحه بعدی ادغام محدوده CSS
فضای خالی اطراف لبه‌های فریم‌بندی عنصر، حاشیه نامیده می‌شود. تنظیم حاشیه باعث ایجاد فضای اضافی "خالی" در بیرون عنصر می‌شود.
ساده‌ترین روش برای تنظیم حاشیه، استفاده از پارامتر margin است، این پارامتر هر واحد طول، مقادیر درصدی و حتی مقادیر منفی را می‌پذیرد.
ویژگی margin CSS
ساده‌ترین روش برای تنظیم حاشیه، استفاده از محدوده پارامتر.
محدوده پذیرای هر واحد طول است، می‌تواند پیکسل، اینچ، میلیمتر یا em باشد.
محدوده می‌تواند تنظیم شود به عنوان auto. روش معمول‌تر این است که برای حاشیه‌ها از مقادیر طول استفاده شود. در این بیان، در لبه‌های مختلف عنصر h1، فضای خالی به اندازه یک چهارم اینچ تنظیم شده است:
h1 {محدوده: 0.25in;}
مثال زیر برای تعریف حاشیه‌های مختلف برای چهار لبه عنصر h1 است، واحد اندازه استفاده شده پیکسل (px) است:
h1 {محدوده: 10px 0px 15px 5px;}
مانند تنظیمات حاشیه داخلی، ترتیب این مقادیر از حاشیه بالا (top) شروع شده و به دور عنصر به سمت چپ می‌چرخد:
حاشیه: بالا راست پایین چپ
علاوه بر این، می‌توانید یک مقادیر درصدی برای حاشیه تعیین کنید:
p {حاشیه: 10%;}
اعداد صحیح در مقایسه با width پدر عنصر محاسبه می‌شوند. در این مثال، حاشیه‌ای که برای عنصر p تنظیم شده است، 10٪ از width پدر عنصر است.
مقادیر پیش‌فرض margin 0 است، بنابراین اگر مقادیری برای margin تعیین نشده باشد، حاشیه‌ای ایجاد نمی‌شود. اما در عمل، مرورگرها برای بسیاری از عناصر سبک‌های پیش‌فرضی را ارائه می‌دهند، حاشیه نیز از این قاعده مستثنی نیست. به عنوان مثال، در مرورگرهایی که از CSS پشتیبانی می‌کنند، حاشیه در بالا و پایین هر عنصر پاراگراف ایجاد می‌شود. بنابراین، اگر حاشیه برای عنصر p تعیین نشده باشد، مرورگر ممکن است خود به خود یک حاشیه اعمال کند. البته، اگر شما به طور خاص آن را مشخص کرده باشید، سبک پیش‌فرض پوشش داده می‌شود.
کپی کردن مقادیر
یادتان می‌آید؟ ما در دو بخش اول ذکر کرده‌ایم که مقادیر کپی شده‌اند. در اینجا ما به شما توضیح می‌دهیم که چگونه می‌توان از کپی کردن مقادیر استفاده کرد.
گاهی اوقات، ما مقادیر تکراری وارد می‌کنیم:
p {حاشیه: 0.5em 1em 0.5em 1em;}
با استفاده از کپی کردن مقادیر، شما نیازی به تایپ مجدد این دو عدد ندارید. این قوانین با قوانین زیر معادل هستند:
p {حاشیه: 0.5em 1em;}
این دو مقادیر می‌توانند جایگزین 4 مقادیر قبلی شوند. این چگونه ممکن است؟ CSS برخی از قوانین را تعریف کرده است که اجازه می‌دهد برای حاشیه کمتر از 4 مقادیر مشخص شود. قوانین به شرح زیر است:
- اگر مقادیر حاشیه چپ کمبود داشته باشد، از مقادیر حاشیه راست استفاده می‌شود.
- اگر مقادیر حاشیه پایین کمبود داشته باشد، از مقادیر حاشیه بالا استفاده می‌شود.
- اگر مقادیر حاشیه راست کمبود داشته باشد، از مقادیر حاشیه بالا استفاده می‌شود.
تصویر زیر روشی بسیار مستقیم‌تر برای درک این موضوع را ارائه می‌دهد:
به عبارت دیگر، اگر 3 مقادیر برای حاشیه تعیین شده باشد، مقادیر چهارم (یعنی حاشیه چپ) از مقادیر دوم (یعنی حاشیه راست) کپی می‌شود. اگر دو مقادیر داده شده باشد، مقادیر چهارم از مقادیر دوم کپی می‌شود و مقادیر سوم (حاشیه پایین) از مقادیر اول (حاشیه بالا) کپی می‌شود. در آخرین حالت، اگر فقط یک مقادیر داده شده باشد، سه حاشیه دیگر از این مقادیر (حاشیه بالا) کپی می‌شوند.
با استفاده از این مکانیزم ساده، شما باید فقط مقادیر مورد نیاز را مشخص کنید، نه همه 4 مقادیر، به عنوان مثال:
h1 {حاشیه: 0.25em 1em 0.5em;} /* معادل 0.25em 1em 0.5em 1em */
h2 {حاشیه: 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 آسان‌تر خواهد بود. اما از دیدگاه نمایش مستند، در واقع هیچ یک از روش‌ها مهم نیست، بنابراین باید روشی که برای شما راحت‌تر است را انتخاب کنید.
توجه و یادداشت‌ها
توجه:نیتسکای و اینترنت اکسپلورر مقدار پیش‌فرض حاشیه (margin) برای برچسب body را 8px تعریف می‌کنند. اما اپرا اینطور نیست. برعکس، اپرا مقدار پیش‌فرض حاشیه داخلی (padding) را 8px تعریف می‌کند، بنابراین اگر می‌خواهید به بخش‌های حاشیه وب‌سایت خود تنظیم دهید و آن‌ها را به درستی در اپرا نمایش دهید، باید padding body را شخصی‌سازی کنید.
مثال حاشیه CSS:
- تنظیم حاشیه چپ متن
- این مثال نشان می‌دهد که چگونه محدوده چپ بیرونی متن را تنظیم می‌کنیم.
- تنظیم محدوده سمت راست بیرونی متن
- این مثال نشان می‌دهد که چگونه محدوده سمت راست بیرونی متن را تنظیم می‌کنیم.
- تنظیم محدوده بالا بیرونی متن
- این مثال نشان می‌دهد که چگونه محدوده بالا بیرونی متن را تنظیم می‌کنیم.
- تنظیم محدوده پایین بیرونی متن
- این مثال نشان می‌دهد که چگونه محدوده پایین بیرونی متن را تنظیم می‌کنیم.
- همه ویژگی‌های محدوده بیرونی در یک اعلام.
- این مثال نشان می‌دهد که چگونه همه ویژگی‌های محدوده بیرونی را در یک اعلام تنظیم می‌کنیم.
ویژگی‌های محدوده بیرونی CSS
| ویژگی | توضیح |
|---|---|
| margin | ویژگی کوتاه‌نویسی. در یک اعلام همه ویژگی‌های محدوده بیرونی را تنظیم می‌کند. |
| margin-bottom | تنظیم محدوده پایین بیرونی عنصر. |
| margin-left | تنظیم محدوده چپ بیرونی عنصر. |
| margin-right | تنظیم محدوده سمت راست بیرونی عنصر. |
| margin-top | تنظیم محدوده بالای بیرونی عنصر. |
- صفحه قبلی کناره CSS
- صفحه بعدی ادغام محدوده CSS
