خاصیت margin در CSS
خاصیت 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 | حاشیه بالای یک عنصر را مشخص می کند. |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 32181
دیدگاه‌ها
سلام
در مثال بالا از درصد استفاده شده میشه یه توضیحی در بارش بدهید مثلا 25 درصد نسبت به چه چیزی هست؟
سلام
در مثال زیر، خصوصیت margin-bottom با مقدار 25% تنظیم شده است. این مقدار نسبت به اندازه عنصر والد یعنی body محاسبه خواهد شد:
www.beyamooz.com/try_it_yourself/tryit.php?filename=trycss_margin-bottom_percent
با سلام
من دارم یک سایت طراحی میکنم و دو جدول دارم و می خواهم این دو جدول را در کانار هم قرار دهم و مارجین هم را تنظیم کردم اما این دو جدول در کنار هم قرار نمی گیرند چگونه این دو جدول در کنار هم قرار دهم هر دو جدول 10% از کنار صفحه فاصله دارند.
با سلام
اگر بخواهیم دو جدول را در یک سطر قرار بدهیم، در صورتی که دو تگ جدول را پشت سر هم قرار دهیم مشکلی که ایجاد می شود این است که جدول دوم در سطر بعدی قرار می گیرد .
یک راه برای حل این مشکل قرار دادن دو جدول مورد نظر در یک جدول دیگر است.
براي اينکه اين جدولهاي دروني، در يک سطر قرار گيرد کافي است به تعداد جدولهاي دروني، در جدول بيروني سلول ايجاد کنيم و جدولها را در سلولهاي جدول بيروني قرار دهيم.
با فلوت کردن نیز می شود دو جدول را در کنار هم قرار داد.
سلام. خسته نباشيد... بعضي از خصوصيات در css وقتي ك تو صفحه چندتا div داشته باشيم درست عمل نميكنن. مثلا در حالت عادي وقتي margin-top ميديم درست عمل ميكنه اما زماني ك توي div ب عناصر اعمال ميشه درست عمل نميكنه و ميبينيم ك عنصر ب قسمت بالاي div چسبيده و پايين نمياد!
فرض كنيد ك بنده ميخوام تو يك div چنتا لينك بذارم و لينك ها ب صورت افقي كنار هم قرار بگيرن. وقتي بهشون margin ميدم اصلا تاثيري در جايگيري اونها نداره فقط در يك حالت درست ميشه زماني ك position رو absolute قرار ميدم ك تو اين صورت هم همه ي لينك ها روي هم ميافته! يا زماني ك text-align رو center قرار ميدم بازم لينك ها وسط نميافتن.ميشه ي توضيح راجبه div هاي تو در تو بديد؟با تشكر
سلام
اولاً یه پیشنهاد ...! اگر میخواهید چندتا عنصر یکسان مثل چندتا لینک را کنار هم استفاده کنید، بهتر است که از لیست های نامرتب یا همان تگ ul استفاده کنید و لینک ها را بعنوان آیتم های لیست تعریف کنید (li)
اما برای اینکه لینک ها در یک خط قرار بگیرند، در ادامه باید روی li ها خصوصیت flot:right را تنظیم نماییم.
اما برگریدم سراغ div ...!
همان طور که میدانید عنصر div یک عنصر block است و همان طور که بارها گفته شده، تمام طول یک سطر را اشغال می کند. وقتی شما اشاره کردید که خصوصیت text-align:cent er را روی div اعمال کرده اید ولی لینک های وسط چین نشده اند، پیداست که div مورد نظر را به نحوی از حالت block خارج کرده اید والا بدون شک، لینک ها در وسط قرار می گرفتند.
شاید گیج شده باشید، اجازه دهید تا بیشتر توضیح بدم ...!
تصور کنید داخل div کلمه "beyamooz" را تایپ کرده اید، زمانی که به خروجی نگاه می کنید می بینید که div تمام طول سطر را اشغال کرده و به بقیه عناصر اجازه نمی دهد که کنار آن قرار بگیرند. حالا طبیعی است که اگر text-align:cent er را روی آن تنظیم کنیم، کلمه "beyamooz" در وسط قرار خواهد گرفت، حالا تصور کنید با float:right آنرا از حالت block به inline تغییر وضعیت دهیم...!
حالا به اندازه محتوایی که دارد طول یک سطر را اشغال می کند. بنابراین طبیعی است که text-align:cent er دیگر بی معنی است. و دیگر "beyamooz" وسط چین نمی شود.
در مورد مشکل margin نیز، اینبار اگر به پیشنهاد من در مورد استفاده از لیست ها عمل کرده باشید باید روی li ها اعمال کنید که بدون شکل، اعمال خواهد شد.
خيلي ممنونم بخاطر پاسخ كاملتون...گاهي وقتا زماني ك div ايجاد ميشه يك فضاي خالي اطرافش ايجاد ميشه....فرض كنيد ك من در يك صفحه ي خالي يك div ايجاد ميكنم كه width اونو 100 % گذاشتم و هيچ margin هم براش تعريف نكردم.به همراه چند ويزگي راجبه پس زمينه و.......
طبيعتا قسمت بالا و چپ و راست div نبايد خالي باشه اما در بعضي مواقع اين اتفاق ميافته و فضاي خالي وجود داره...علتش چيه؟
اولاً روی div تنظیم width:100% بی معنی است، چون بصورت پیشفرض تمام طول سطر رو اشغال می کند...!
باتوجه به گفته شما، جهت جلوگیری از تفاوت ظاهر در مرورگرهای مختلف، بسیار مناسب است که برای عنصر body خصوصیات padding و margin را با مقدار "0" تنظیم کنیم.
سلام من الآن یک سایت میسازم تکمیلش میکنم.
حالا اگر بخواهم درون سایتم مطلب ارسال کنم باید کدهای خودم را تغیر بدم یا باید از نرم افزار استفاده کرد؟
سلام، متوجه سوالتون نشدم...! ولی باید بدونید که پایگاه داده جزء لاینفک یک سایت محسوب می شه، بنابراین زمانی که می خواهید ارسال مطلب داشته باشید، مطمئناً متن مورد نظر باید در پایگاه داده ذخیره بشه و نیازی به تغییر کدها وجود نداره ...!