زنگ CSS: جلسه هشتم - مارجین (margin)

همانطور که در بخش پیشین یاد گرفته‌ایم، المان‌های اچ تی ام ال دارای فاصله‌ای نامرئی از یکدیگر هستند. این فاصله‌ها از طریق مارجین اندازه گیری و استفاده می‌شوند. برای آشنایی با مارجین با ما همراه باشید. 

مارجین:

فرض کنید که دو المان در صفحه دارید که می‌خواهید فاصله ۵۰ پیکسلی بین آن‌ها بیندازید. مثلا دو div با ابعاد طول و عرض ۱۰۰  در ۱۰۰ پیکسل داریم که می خواهیم از هم فاصله ۵۰ پیکسلی داشته باشند.  در این جور مواقع است که مارجین به کمک می‌آید. مارجین در واقع فاصله بین دو المان است.

اگر بخواهیم تعریف علمی‌تری از مارجین داشته باشیم باید بگوییم که مارجین، فاصله‌ای است که بین بیرونی‌ترین سطح هر المان(قاب خارجی دور هر المان است) با خارجی‌ترین سطح المان دیگر (قاب دور المان) وجود دارد. 

نحوه‌ی اضافه کردن مارجین حول و حوش یک المان:

حالت اول:‌ هر المان می‌تواند در هر چهار جهت دارای یک فاصله‌ی مشخص باشد. اگر بخواهید دور تا دور یک المان، یعنی در هر چهار جهت فاصله یکسان و مساوی بیندازید، تنها کافیست تا کلمه مارجین را نوشته و روبروی آن عدد مورد نظر بر حسب پیکسل بنویسید. بدین ترتیب این فاصله به هر چهار طرف اعمال می‌شود. (حتما دقت کنید که کلمه px که همان واحد فاصله بر حسب پیکسل است را در کنار عدد مربوط به مارجین یا هر عدد دیگر در سی اس اس بنویسید.)

نام: margin این ویژگی چه کاری انجام می‌دهد؟‌  با کمک این ویژگی می‌توانید بین المان‌های اچ تی ام ال فاصله ایجاد کنید.  چه چیزهایی را در مقابلش بنویسیم؟  فاصله بر حسب px. نمونه نوشتن این دستور: margin:20px 

در مثال زیر ما ابتدا حالت بدون مارجین را برای دو المان بررسی ٰکرده‌ایم. همانطور که می‌بینید در حالت بدون مارجین المان‌ها به هم چسبیده‌اند و از اطراف نیز در یک فاصله‌ی مشخص و مساوی قرار دارند.

HTML

ویدیو مرتبط :
‫آموزش طراحی سایت با CSS | آموزش هم پوشانی عناصر با استفاده از مشخصه margin در CSS‬‎