خاصیت Margin در CSS
خصوصیت Margin فضای اطراف عناصر را پاک می کند، یعنی فضای بیرون از Border یا لبه ها را مشخص می کند، خصوصیت Margin کاملاً شفاف و بدون رنگ است.
فضای بالا، راست، پایین و چپ یک عنصر می تواند بصورت مستقل تعریف و مشخص شود، البته برای مختصر نویسی از خصوصیت Margin استفاده می شود که در ادامه توضیح خواهیم داد.
مقادیر ممکن:
خصوصیات مربوط به حاشیه ممکن است به صورت زیر مقداردهی شوند:
| مقدار | توضیحات |
|---|---|
| auto | مرورگر(Browser) حاشیه را مشخص می کند. این نتیجه به مرورگر بستگی دارد. |
| فاصله | یک حاشیه ثابت تعریف می شود (px, pt, em) |
| % | درصدی از عنصر برای حاشیه درنظر گرفته می شود. |
نکته: مقدار حاشیه می تواند منفی باشد، که در این صورت روی هم افتادگی محتوا خواهیم داشت.
تنظیم حاشیه ها، به صورت جداگانه
در مثال زیر، حاشیه بالا و پایین 100 پیکسل و حاشیه راست و چپ 50 پیکسل تعریف شده است:
مثال (خاصیت margin در CSS)
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
مختصر نویسی - margin
برای مختصر نویسی و کوتاه شدن کد، می توانید همه چهار حاشیه یک عنصر را در یک خصوصیت تعریف کنید، برای این منظور از خصوصیت Margin استفاده کنید:
خصوصیت Margin از یک تا چهار مقدار می تواند داشته باشد:
- margin:25px 50px 75px 100px;
- حاشیه بالا 25 پیکسل
- حاشیه راست 50 پیکسل
- حاشیه پایین 75 پیکسل
- حاشیه چپ 100 پیکسل
- margin:25px 50px 75px;
- حاشیه بالا 25 پیکسل
- حاشیه راست و چپ 50 پیکسل
- حاشیه پایین 75 پیکسل
- margin:25px 50px;
- حاشیه بالا و پایین 25 پیکسل
- حاشیه راست و چپ 50 پیکسل
- margin:25px;
- حاشیه بالا، راست، پایین و چپ 25 پیکسل
تنظیم حاشیه بالای یک پاراگراف با مقدار cm
این مثال نشان می دهد که چگونه حاشیه بالای یک متن را با استفاده از مقدار CM تنظیم کنیم.
تنظیم حاشیه پایین یک پاراگراف با درصد
این مثال نشان می دهد که چگونه حاشیه پایین یک پاراگراف را به نسبت فضایی که در آن قرار گرفته به درصد تنظیم کنیم.
کلیه خصوصیات مربوط به حاشیه:
| خصوصیت | توضیحات |
|---|---|
| margin | حاشیه های اطراف یک عنصر را به صورت مختصر مشخص می کند. |
| margin-bottom | حاشیه پایین یک عنصر را مشخص می کند. |
| margin-left | حاشیه چب یک عنصر را مشخص می کند. |
| margin-right | حاشیه راست یک عنصر را مشخص می کند. |
| margin-top | حاشیه بالای یک عنصر را مشخص می کند. |
در مثال بالا از درصد استفاده شده میشه یه توضیحی در بارش بدهید مثلا 25 درصد نسبت به چه چیزی هست؟
در مثال زیر، خصوصیت margin-bottom با مقدار 25% تنظیم شده است. این مقدار نسبت به اندازه عنصر والد یعنی body محاسبه خواهد شد:
www.beyamooz.com/try_it_yourself/tryit.php?filename=trycss_margin-bottom_percent
من دارم یک سایت طراحی میکنم و دو جدول دارم و می خواهم این دو جدول را در کانار هم قرار دهم و مارجین هم را تنظیم کردم اما این دو جدول در کنار هم قرار نمی گیرند چگونه این دو جدول در کنار هم قرار دهم هر دو جدول 10% از کنار صفحه فاصله دارند.
اگر بخواهیم دو جدول را در یک سطر قرار بدهیم، در صورتی که دو تگ جدول را پشت سر هم قرار دهیم مشکلی که ایجاد می شود این است که جدول دوم در سطر بعدی قرار می گیرد .
یک راه برای حل این مشکل قرار دادن دو جدول مورد نظر در یک جدول دیگر است.
براي اينکه اين جدولهاي دروني، در يک سطر قرار گيرد کافي است به تعداد جدولهاي دروني، در جدول بيروني سلول ايجاد کنيم و جدولها را در سلولهاي جدول بيروني قرار دهيم.
فرض كنيد ك بنده ميخوام تو يك div چنتا لينك بذارم و لينك ها ب صورت افقي كنار هم قرار بگيرن. وقتي بهشون margin ميدم اصلا تاثيري در جايگيري اونها نداره فقط در يك حالت درست ميشه زماني ك position رو absolute قرار ميدم ك تو اين صورت هم همه ي لينك ها روي هم ميافته! يا زماني ك text-align رو center قرار ميدم بازم لينك ها وسط نميافتن.ميشه ي توضيح راجبه div هاي تو در تو بديد؟با تشكر
اولاً یه پیشنهاد ...! اگر میخواهید چندتا عنصر یکسان مثل چندتا لینک را کنار هم استفاده کنید، بهتر است که از لیست های نامرتب یا همان تگ ul استفاده کنید و لینک ها را بعنوان آیتم های لیست تعریف کنید (li)
اما برای اینکه لینک ها در یک خط قرار بگیرند، در ادامه باید روی li ها خصوصیت flot:right را تنظیم نماییم.
اما برگریدم سراغ div ...!
همان طور که میدانید عنصر div یک عنصر block است و همان طور که بارها گفته شده، تمام طول یک سطر را اشغال می کند. وقتی شما اشاره کردید که خصوصیت text-align:center را روی div اعمال کرده اید ولی لینک های وسط چین نشده اند، پیداست که div مورد نظر را به نحوی از حالت block خارج کرده اید والا بدون شک، لینک ها در وسط قرار می گرفتند.
شاید گیج شده باشید، اجازه دهید تا بیشتر توضیح بدم ...!
تصور کنید داخل div کلمه "beyamooz" را تایپ کرده اید، زمانی که به خروجی نگاه می کنید می بینید که div تمام طول سطر را اشغال کرده و به بقیه عناصر اجازه نمی دهد که کنار آن قرار بگیرند. حالا طبیعی است که اگر text-align:center را روی آن تنظیم کنیم، کلمه "beyamooz" در وسط قرار خواهد گرفت، حالا تصور کنید با float:right آنرا از حالت block به inline تغییر وضعیت دهیم...!
حالا به اندازه محتوایی که دارد طول یک سطر را اشغال می کند. بنابراین طبیعی است که text-align:center دیگر بی معنی است. و دیگر "beyamooz" وسط چین نمی شود.
در مورد مشکل margin نیز، اینبار اگر به پیشنهاد من در مورد استفاده از لیست ها عمل کرده باشید باید روی li ها اعمال کنید که بدون شکل، اعمال خواهد شد.
طبيعتا قسمت بالا و چپ و راست div نبايد خالي باشه اما در بعضي مواقع اين اتفاق ميافته و فضاي خالي وجود داره...علتش چيه؟
باتوجه به گفته شما، جهت جلوگیری از تفاوت ظاهر در مرورگرهای مختلف، بسیار مناسب است که برای عنصر body خصوصیات padding و margin را با مقدار "0" تنظیم کنیم.
حالا اگر بخواهم درون سایتم مطلب ارسال کنم باید کدهای خودم را تغیر بدم یا باید از نرم افزار استفاده کرد؟