| قدم قبلی > | < قدم بعدی |
CSS Margins
خاصیت CSS margins برای ایجاد فضای اطراف متون و عناصر، در بیرون هر حاشیه تعریف شده استفاده می شود. بوسیله برنامه نویسی ، شما کنترل کامل برمارجین ها خواهید داشت. امکان تنظیم خاصیت margins برای حاشیه هر طرف یک عنصر (بالا، راست، پایین و سمت چپ) وجود دارد.
کناره های تکی
CSS دارای این امکان است که شما خصوصیت مارجین را برای هر طرف حاشیه یک عنصر مستقلا تنظیم کنید:
- margin-top
- margin-right
- margin-bottom
- margin-left
تمام خواص margin می توانند مقادیر زیر را داشته باشند:
auto – مرورگر محدوده حاشیه را محاسبه می کند.
length – محدوده حاشیه را بر اساس px، pt، cm و … مشخص می کند.
٪ – محدوده یک حاشیه را بر اساس ٪ از مقدار محدوده عرض عنصر مشخص می کند.
inherit – مشخص می کند که حاشیه باید از عنصر والدی به ارث برده شود.
نکته: مقادیر منفی اجازه استفاده ندارند.
مثال زیر حاوی مقادیر مختلف برای margins در هر چهار طرف یک عنصر<p> است:
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <head> <style> div { border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; background-color: lightblue; } </style> </head> <body> <h2>Using individual margin properties</h2> <div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div> </body> </html> |
با اجرای کد بالا تصویر زیر را در خروجی خواهید دید:
کدنویسی کوتاه برای margins
برای کوتاه کردن کد، می توان تمام خصوصیات مختلف برای مارجین را در یک ویژگی گنجاند.
ویژگی margin یک ویژگی مختصر برای خصوصیات مارجینی زیر است:
- margin-top
- margin-right
- margin-bottom
- margin-left
در اینجا نحوه انجام این کار را خواهید دید:
اگر ویژگی margin دارای چهار مقدار زیر باشد:
مارجین: ۲۵px 50px 75px 100px؛
مارجین بالایی ۲۵ پیکسل است.
مارجین راست ۵۰ پیکسل است.
مارجین پایین ۷۵ پیکسل است.
مارجین سمت چپ ۱۰۰ پیکسل است.
با اجرای کد زیر می توانیم همه این خصوصیات را در یک خصیصه خلاصه کنیم:
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <style> div { border: 1px solid black; margin: 25px 50px 75px 100px; background-color: lightblue; } </style> </head> <body> <h2>The margin shorthand property - 4 values</h2> <div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div> <hr> </body> </html> |
با اجرای کد بالا باید تصویر زیر را در خروجی ببینید:
اگر بخواهیم ویژگی مارجین دارای سه مقدار باشد:
مارجین: ۲۵px ۵۰px ۷۵px؛
مارجین بالای ۲۵ پیکسل است
مارجین راست و چپ ۵۰ پیکسل است
مارجین پایین ۷۵ پیکسل است
با اجرای کد زیر می توانیم همه این خصوصیات را در یک خصیصه خلاصه کنیم:
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <style> div { border: 1px solid black; margin: 25px 50px 75px; background-color: lightblue; } </style> </head> <body> <h2>The margin shorthand property - 3 values</h2> <div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div> <hr> </body> </html> |
با اجرای کد بالا باید تصویر زیر را در خروجی ببینید:
اگر بخواهیم ویژگی مارجین دارای دو مقدار باشد:
مارجین : ۲۵px 50px؛
مارجین بالا و پایین ۲۵ پیکسل است
مارجین راست و چپ ۵۰ پیکسل است
با اجرای کد زیر می توانیم همه این خصوصیات را در یک خصیصه خلاصه کنیم:
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <style> div { border: 1px solid black; margin: 25px 50px; background-color: lightblue; } </style> </head> <body> <h2>The margin shorthand property - 2 values</h2> <div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div> <hr> </body> </html> |
با اجرای کد بالا باید تصویر زیر را در خروجی ببینید:
اگر ویژگی مارجین دارای یک مقدار باشد:
مارجین: ۲۵ پیکسل؛
تمام چهار حاشیه ۲۵ پیکسل است
با اجرای کد زیر می توانیم همه این خصوصیات را در یک خصیصه خلاصه کنیم:
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <style> div { border: 1px solid black; margin: 25px; background-color: lightblue; } </style> </head> <body> <h2>The margin shorthand property - 1 value</h2> <div>This div element has a top, bottom, left, and right margin of 25px.</div> <hr> </body> </html> |
با اجرای کد بالا باید تصویر زیر را در خروجی ببینید:
auto Value
شما می توانید ویژگی Margins را به صورت اتوماتیک تنظیم کنید تا عنصر را در جای مخصوص خود به صورت افقی قرار دهید. سپس عنصر عرض مشخص شده را می گیرد و فضای باقیمانده به طور مساوی بین حاشیه های چپ و راست تقسیم می شود:
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <style> div { width:300px; margin: auto; border: 1px 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>) به ارث برده شود:
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <style> div { border: 1px solid red; margin-left: 100px; } 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)
مارجین های بالا و پایین عناصر گاهی به یک مارجین واحد تقسیم می‌شوند که برابر با بزرگ‌ترین در بین دو مارجین است .
البته این مسئله در مارجین چپ و راست اتفاق نمی افتد! تنها مارجین های بالا و پایین!
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html> <head> <style> h1 { margin: 0 0 50px 0; } h2 { margin: 20px 0 0 0; } </style> </head> <body> <p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. Then, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.</p> <h1>Heading 1</h1> <h2>Heading 2</h2> </body> </html> |
با اجرای کد بالا می توانید تصویر زیر را در خروجی ببینید:
در مثال بالا، عنصر <h1> دارای مارجین پایین ۵۰ پیکسل است و عنصر <h2> دارای مارجین بالای ۲۰px می باشد.
به نظر می رسد حس مشترک نشان می دهد حاشیه عمودی بین <h1> و <h2> در مجموع ۷۰px (50px + 20px) است. اما با توجه به سقوط حاشیه، حاشیه واقعی به ۵۰ پیکسل می رسد.
| گام قبلی > | < گام بعدی |
هنوز دیدگاهی برای این مطلب ثبت نشده است.