| قدم قبلی > | < قدم بعدی |
CSS Margins
خاصیت CSS margins برای ایجاد فضای اطراف متون و عناصر، در بیرون هر حاشیه تعریف شده استفاده می شود. بوسیله برنامه نویسی ، شما کنترل کامل برمارجین ها خواهید داشت. امکان تنظیم خاصیت margins برای حاشیه هر طرف یک عنصر (بالا، راست، پایین و سمت چپ) وجود دارد.
کناره های تکی
CSS دارای این امکان است که شما خصوصیت مارجین را برای هر طرف حاشیه یک عنصر مستقلا تنظیم کنید:
- margin-top
- margin-right
- margin-bottom
- margin-left
تمام خواص margin می توانند مقادیر زیر را داشته باشند:
auto – مرورگر محدوده حاشیه را محاسبه می کند.
length – محدوده حاشیه را بر اساس px، pt، cm و … مشخص می کند.
٪ – محدوده یک حاشیه را بر اساس ٪ از مقدار محدوده عرض عنصر مشخص می کند.
inherit – مشخص می کند که حاشیه باید از عنصر والدی به ارث برده شود.
نکته: مقادیر منفی اجازه استفاده ندارند.
مثال زیر حاوی مقادیر مختلف برای margins در هر چهار طرف یک عنصر<p> است:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ | <html> <head> <style> div { border: ۱px solid black; margin-top: ۱۰۰px; margin-bottom: ۱۰۰px; margin-right: ۱۵۰px; margin-left: ۸۰px; background-color: lightblue; } </style> </head> <body> <h2>Using individual margin properties</h2> <div>This div element has a top margin of ۱۰۰px, a right margin of ۱۵۰px, a bottom margin of ۱۰۰px, and a left margin of ۸۰px.</div> </body> </html> |
با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:
کدنویسی کوتاه برای margins
برای کوتاه کردن کد، می توان تمام خصوصیات مختلف برای مارجین را در یک ویژگی گنجاند.
ویژگی margin یک ویژگی مختصر برای خصوصیات مارجینی زیر است:
- margin-top
- margin-right
- margin-bottom
- margin-left
در اینجا نحوه انجام این کار را خواهید دید:
اگر ویژگی margin دارای چهار مقدار زیر باشد:
مارجین: ۲۵px 50px 75px 100px؛
مارجین بالایی ۲۵ پیکسل است.
مارجین راست ۵۰ پیکسل است.
مارجین پایین ۷۵ پیکسل است.
مارجین سمت چپ ۱۰۰ پیکسل است.
با اجرای کد زیر می توانیم همه این خصوصیات را در یک خصیصه خلاصه کنیم:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ | <html> <head> <style> div { border: ۱px solid black; margin: ۲۵px ۵۰px ۷۵px ۱۰۰px; background-color: lightblue; } </style> </head> <body> <h2>The margin shorthand property - ۴ values</h2> <div>This div element has a top margin of ۲۵px, a right margin of ۵۰px, a bottom margin of ۷۵px, and a left margin of ۱۰۰px.</div> <hr> </body> </html> |
با اجرای کد بالا باید تصویر زیر را در خروجی ببینید:
اگر بخواهیم ویژگی مارجین دارای سه مقدار باشد:
مارجین: ۲۵px ۵۰px ۷۵px؛
مارجین بالای ۲۵ پیکسل است
مارجین راست و چپ ۵۰ پیکسل است
مارجین پایین ۷۵ پیکسل است
با اجرای کد زیر می توانیم همه این خصوصیات را در یک خصیصه خلاصه کنیم:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ | <html> <head> <style> div { border: ۱px solid black; margin: ۲۵px ۵۰px ۷۵px; background-color: lightblue; } </style> </head> <body> <h2>The margin shorthand property - ۳ values</h2> <div>This div element has a top margin of ۲۵px, a right and left margin of ۵۰px, and a bottom margin of ۷۵px.</div> <hr> </body> </html> |
با اجرای کد بالا باید تصویر زیر را در خروجی ببینید:
اگر بخواهیم ویژگی مارجین دارای دو مقدار باشد:
مارجین : ۲۵px 50px؛
مارجین بالا و پایین ۲۵ پیکسل است
مارجین راست و چپ ۵۰ پیکسل است
با اجرای کد زیر می توانیم همه این خصوصیات را در یک خصیصه خلاصه کنیم:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ | <html> <head> <style> div { border: ۱px solid black; margin: ۲۵px ۵۰px; background-color: lightblue; } </style> </head> <body> <h2>The margin shorthand property - ۲ values</h2> <div>This div element has a top and bottom margin of ۲۵px, and a right and left margin of ۵۰px.</div> <hr> </body> </html> |
با اجرای کد بالا باید تصویر زیر را در خروجی ببینید:
اگر ویژگی مارجین دارای یک مقدار باشد:
مارجین: ۲۵ پیکسل؛
تمام چهار حاشیه ۲۵ پیکسل است
با اجرای کد زیر می توانیم همه این خصوصیات را در یک خصیصه خلاصه کنیم:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ | <html> <head> <style> div { border: ۱px solid black; margin: ۲۵px; background-color: lightblue; } </style> </head> <body> <h2>The margin shorthand property - ۱ value</h2> <div>This div element has a top, bottom, left, and right margin of ۲۵px.</div> <hr> </body> </html> |
با اجرای کد بالا باید تصویر زیر را در خروجی ببینید:
auto Value
شما می توانید ویژگی Margins را به صورت اتوماتیک تنظیم کنید تا عنصر را در جای مخصوص خود به صورت افقی قرار دهید. سپس عنصر عرض مشخص شده را می گیرد و فضای باقیمانده به طور مساوی بین حاشیه های چپ و راست تقسیم می شود:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ | <html> <head> <style> div { width:۳۰۰px; margin: auto; border: ۱px solid red; } </style> </head> <body> <h2>Use of margin:auto</h2> <p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p> <div> This div will be horizontally centered because it has margin: auto; </div> </body> </html> |
با اجرای کد بالا می توانید تصویر زیر را در خروجی ببینید:
inherit Value
این مثال اجازه می دهد که مارجین سمت چپ عنصر <p class = “ex1”> از عنصر والد(<div>) به ارث برده شود:
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ | <html> <head> <style> div { border: ۱px solid red; margin-left: ۱۰۰px; } p.ex1 { margin-left: inherit; } </style> </head> <body> <h2>Use of the inherit value</h2> <p>Let the left margin be inherited from the parent element:</p> <div> <p class="ex1">This paragraph has an inherited left margin (from the div element).</p> </div> </body> </html> |
با اجرای کد بالا می توانید تصویر زیر را در خروجی ببینید:
سقوط حاشیه (Margins Collapse)
مارجین های بالا و پایین عناصر گاهی به یک مارجین واحد تقسیم می‌شوند که برابر با بزرگ‌ترین در بین دو مارجین است .
البته این مسئله در مارجین چپ و راست اتفاق نمی افتد! تنها مارجین های بالا و پایین!
مثال:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ | <html> <head> <style> h1 { margin: ۰ ۰ ۵۰px ۰; } h2 { margin: ۲۰px ۰ ۰ ۰; } </style> </head> <body> <p>In this example the h1 element has a bottom margin of ۵۰px and the h2 element has a top margin of ۲۰px. Then, the vertical margin between h1 and h2 should have been ۷۰px (۵۰px + ۲۰px). However, due to margin collapse, the actual margin ends up being ۵۰px.</p> <h1>Heading ۱</h1> <h2>Heading ۲</h2> </body> </html> |
با اجرای کد بالا می توانید تصویر زیر را در خروجی ببینید:
در مثال بالا، عنصر <h1> دارای مارجین پایین ۵۰ پیکسل است و عنصر <h2> دارای مارجین بالای ۲۰px می باشد.
به نظر می رسد حس مشترک نشان می دهد حاشیه عمودی بین <h1> و <h2> در مجموع ۷۰px (50px + 20px) است. اما با توجه به سقوط حاشیه، حاشیه واقعی به ۵۰ پیکسل می رسد.
| گام قبلی > | < گام بعدی |
هنوز دیدگاهی برای این مطلب ثبت نشده است.