با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش کار با فضای بین عناصر html در css بپردازیم. در css ویژگی margin این امکان را می دهد که بین عناصر html فضای خالی به عنوان فاصله بین عناصر ایجاد کرده و آن را مدیریت کنید. با این ویژگی ظاهر قالب وب سایت شما زیباتر شده و عناصر html از هم تفکیک می شوند. و بیشتر به چشم می آیند.
در پست های آموزشی قبلی برای زیباتر شدن قالب وب سایت شما و ظاهر عناصر آن ، پست های آموزشی کار با ویژگی های border در css و آموزش تنظیمات تصویر پس زمینه در css را ارائه کردیم.
در صورتی که اطلاعات کمی در مود css دارید ، می توانید پست آموزشی ساختار کد نویسی css را جهت آشنایی بهتر با css، بررسی کنید. در ادامه این پست به آموزش کار با فضای بین عناصر html در css می پردازیم.
برای کار با فضای بین عناصر html در css ، شما کنترل کامل بر حاشیه (margin) ها را دارید. این ویژگی امکان تنظیم حاشیه برای هر طرف یک عنصر (بالا، راست، پایین و سمت چپ) را در اختیار شما قرار می دهد.
نمونه ای از مشخص کردن margin عناصر html در CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <style> div { margin: 70px; border: 1px solid #4CAF50; } </style> </head> <body> <div>This element has a margin of 70px.</div> </body> </html> |
CSS دارای خصوصیات برای تعیین حاشیه برای هر طرف یک عنصر است:
margin-top
margin-right
margin-bottom
margin-left
مقادیر ویژگی margin می تواند هر یک از فرمت های زیر باشد:
در مثال زیر فضاهای خالی مختلف برای چهار جهت اصلی عناصر html ارائه شده است:
1 2 3 4 5 6 | p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } |
برای کوتاه تر کردن کدها شما می توانید اندازه فضای حاشیه برای هر ۴ جهت را که در مثال قبلی ذکر شده، در یک خط بصورت مختصر قرار دهید، فقط باید ترتیب ۴ جهت اصلی را در css بدانید، که ترتیب آن به این صورت است:
margin-top
margin-right
margin-bottom
margin-left
مثلا تفسیر کد کوتاه شده margin: 25px 50px 75px 100px به صورت زیر است:
مثال کد بالا در css:
همچنین می توانید مقادیر مثال فوق را به سه ، دو و یک مقدار کاهش دهید. در این صورت اندازه ها فقط برای همان جهت ها اعمال می شود.
اگر در ویژگی margin سه مقدار را تعیین کنیم، ترتیب اعمال آن به صورت زیر خواهد بود:
اگر در ویژگی margin دو مقدار را تعیین کنیم، ترتیب اعمال آن به صورت زیر خواهد بود:
اگر در ویژگی margin یک مقدار را تعیین کنیم، ترتیب اعمال آن به صورت زیر خواهد بود:
مقدار auto این امکان را فراهم می کند که اندازه های فضای حاشیه عنصر html بر اساس اندازه عرض (width) که توسط شما تعیین می شود. بصورت خودکار محاسبه و اعمال شود.
عنصر html سپس عرض (width) مشخص شده را می گیرد. و فضای باقیمانده به طور مساوی بین حاشیه های چپ و راست تقسیم می شود.
مثال:
1 2 3 4 5 | div { width: 300px; margin: auto; border: 1px solid red; } |
در این حالت مقدار فضای حاشیه یک عنصر از عنصر دیگری به ارث می رسد!
در این مثال اجازه می دهد که حاشیه سمت چپ عنصر <p class = “ex1”> از عنصر والد (<div>) به ارث برده شود:
1 2 3 4 5 6 7 8 | div { border: 1px solid red; margin-left: 100px; } p.ex1 { margin-left: inherit; } |
در مثال های قبل چگونگی کوتاه کردن کد را ارائه کردیم، شما می توانید در کد کوتاه شده، اندازه فقط یک جهت را تعیین کنید.
مثال: در اینجا فقط اندازه حاشیه بالا و پایین تعیین شده است!
1 2 3 4 5 6 7 | h1 { margin: 0 0 50px 0; } h2 { margin: 20px 0 0 0; } |
در مثال فوق عنصر <h1> خصوصیت margin پایینی آن ۵۰px خواهد بود و برای عنصر <h2> نیز خصوصیت margin بالایی آن ۲۰px خواهد بود.
خصوصیت | توضیحات |
---|---|
margin | خصوصیات هر ۴ طرف margin را در یک عنصر مشخص می کند. |
margin-bottom | مقدار margin پایینی یک عنصر HTML را مشخص می کند. |
margin-left | مقدار margin چپ یک عنصر HTML را مشخص می کند. |
margin-right | مقدار margin راست یک عنصر HTML را مشخص می کند. |
margin-top | مقدار margin بالایی یک عنصر HTML را مشخص می کند. |
در حالت عادی در عناصر HTML صفحه وب، فاصله ای بین آن ها وجود نداشته و آن ها به یکدیگر می چسبند، برای جلوگیری از این مشکل کافیست کار با فضای بین عناصر html در css را بدانید و از آن استفاده کنید.
mohsen11astane
مرسی داداش