سبد خرید (0)

تبلیغات

خاصیت margin در CSS

خاصیت Margin در CSS

Wiki

خصوصیت Margin فضای اطراف عناصر را پاک می کند، یعنی فضای بیرون از Border یا لبه ها را مشخص می کند، خصوصیت Margin کاملاً شفاف و بدون رنگ است.

فضای بالا، راست، پایین و چپ یک عنصر می تواند بصورت مستقل تعریف و مشخص شود، البته برای مختصر نویسی از خصوصیت Margin استفاده می شود که در ادامه توضیح خواهیم داد.

مقادیر ممکن:

خصوصیات مربوط به حاشیه ممکن است به صورت زیر مقداردهی شوند:

مقدارتوضیحات
auto مرورگر(Browser) حاشیه را مشخص می کند.
این نتیجه به مرورگر بستگی دارد.
فاصله یک حاشیه ثابت تعریف می شود (px, pt, em)
% درصدی از عنصر برای حاشیه درنظر گرفته می شود.

Remarkنکته: مقدار حاشیه می تواند منفی باشد، که در این صورت روی هم افتادگی محتوا خواهیم داشت.


تنظیم حاشیه ها، به صورت جداگانه

Wiki

در مثال زیر، حاشیه بالا و پایین 100 پیکسل و حاشیه راست و چپ 50 پیکسل تعریف شده است:

مثال (خاصیت margin در CSS)

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
خودتان امتحان کنید »

مختصر نویسی - margin

Wiki

برای مختصر نویسی و کوتاه شدن کد، می توانید همه چهار حاشیه یک عنصر را در یک خصوصیت تعریف کنید، برای این منظور از خصوصیت Margin استفاده کنید:

مثال (خاصیت margin در CSS)

margin:100px 50px;
خودتان امتحان کنید »

خصوصیت Margin از یک تا چهار مقدار می تواند داشته باشد:

  1. margin:25px 50px 75px 100px;
    • حاشیه بالا 25 پیکسل
    • حاشیه راست 50 پیکسل
    • حاشیه پایین 75 پیکسل
    • حاشیه چپ 100 پیکسل
  2. margin:25px 50px 75px;
    • حاشیه بالا 25 پیکسل
    • حاشیه راست و چپ 50 پیکسل
    • حاشیه پایین 75 پیکسل
  3. margin:25px 50px;
    • حاشیه بالا و پایین 25 پیکسل
    • حاشیه راست و چپ 50 پیکسل
  4. margin:25px;
    • حاشیه بالا، راست، پایین و چپ 25 پیکسل

مثال - خودتان امتحان کنید

Wiki

تنظیم حاشیه بالای یک پاراگراف با مقدار cm
این مثال نشان می دهد که چگونه حاشیه بالای یک متن را با استفاده از مقدار CM تنظیم کنیم.

تنظیم حاشیه پایین یک پاراگراف با درصد
این مثال نشان می دهد که چگونه حاشیه پایین یک پاراگراف را به نسبت فضایی که در آن قرار گرفته به درصد تنظیم کنیم.


کلیه خصوصیات مربوط به حاشیه:

Wiki

خصوصیتتوضیحات
margin حاشیه های اطراف یک عنصر را به صورت مختصر مشخص می کند.
margin-bottom حاشیه پایین یک عنصر را مشخص می کند.
margin-left حاشیه چب یک عنصر را مشخص می کند.
margin-right حاشیه راست یک عنصر را مشخص می کند.
margin-top حاشیه بالای یک عنصر را مشخص می کند.

دیدگاه‌ها  

+2 # Guest 1395-06-14 13:50
سلام
در مثال بالا از درصد استفاده شده میشه یه توضیحی در بارش بدهید مثلا 25 درصد نسبت به چه چیزی هست؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1395-06-17 16:51
سلام
در مثال زیر، خصوصیت margin-bottom با مقدار 25% تنظیم شده است. این مقدار نسبت به اندازه عنصر والد یعنی body محاسبه خواهد شد:
www.beyamooz.com/try_it_yourself/tryit.php?filename=trycss_margin-bottom_percent
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # amin. 1394-06-29 12:28
با سلام
من دارم یک سایت طراحی میکنم و دو جدول دارم و می خواهم این دو جدول را در کانار هم قرار دهم و مارجین هم را تنظیم کردم اما این دو جدول در کنار هم قرار نمی گیرند چگونه این دو جدول در کنار هم قرار دهم هر دو جدول 10% از کنار صفحه فاصله دارند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # شهربانو دوستی 1394-06-29 14:46
با سلام
اگر بخواهیم دو جدول را در یک سطر قرار بدهیم، در صورتی که دو تگ جدول را پشت سر هم قرار دهیم مشکلی که ایجاد می شود این است که جدول دوم در سطر بعدی قرار می گیرد .
یک راه برای حل این مشکل قرار دادن دو جدول مورد نظر در یک جدول دیگر است.
براي اينکه اين جدولهاي دروني، در يک سطر قرار گيرد کافي است به تعداد جدولهاي دروني، در جدول بيروني سلول ايجاد کنيم و جدولها را در سلولهاي جدول بيروني قرار دهيم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # amin. 1394-06-29 15:44
با فلوت کردن نیز می شود دو جدول را در کنار هم قرار داد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # mohsen moardi 1393-11-09 15:07
سلام. خسته نباشيد... بعضي از خصوصيات در css وقتي ك تو صفحه چندتا div داشته باشيم درست عمل نميكنن. مثلا در حالت عادي وقتي margin-top ميديم درست عمل ميكنه اما زماني ك توي div ب عناصر اعمال ميشه درست عمل نميكنه و ميبينيم ك عنصر ب قسمت بالاي div چسبيده و پايين نمياد!
فرض كنيد ك بنده ميخوام تو يك div چنتا لينك بذارم و لينك ها ب صورت افقي كنار هم قرار بگيرن. وقتي بهشون margin ميدم اصلا تاثيري در جايگيري اونها نداره فقط در يك حالت درست ميشه زماني ك position رو absolute قرار ميدم ك تو اين صورت هم همه ي لينك ها روي هم ميافته! يا زماني ك text-align رو center قرار ميدم بازم لينك ها وسط نميافتن.ميشه ي توضيح راجبه div هاي تو در تو بديد؟با تشكر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1393-11-09 20:34
سلام
اولاً یه پیشنهاد ...! اگر میخواهید چندتا عنصر یکسان مثل چندتا لینک را کنار هم استفاده کنید، بهتر است که از لیست های نامرتب یا همان تگ 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 ها اعمال کنید که بدون شکل، اعمال خواهد شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mohsen moardi 1393-11-09 21:53
خيلي ممنونم بخاطر پاسخ كاملتون...گاهي وقتا زماني ك div ايجاد ميشه يك فضاي خالي اطرافش ايجاد ميشه....فرض كنيد ك من در يك صفحه ي خالي يك div ايجاد ميكنم كه width اونو 100 % گذاشتم و هيچ margin هم براش تعريف نكردم.به همراه چند ويزگي راجبه پس زمينه و.......
طبيعتا قسمت بالا و چپ و راست div نبايد خالي باشه اما در بعضي مواقع اين اتفاق ميافته و فضاي خالي وجود داره...علتش چيه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-11-10 10:37
اولاً روی div تنظیم width:100% بی معنی است، چون بصورت پیشفرض تمام طول سطر رو اشغال می کند...!
باتوجه به گفته شما، جهت جلوگیری از تفاوت ظاهر در مرورگرهای مختلف، بسیار مناسب است که برای عنصر body خصوصیات padding و margin را با مقدار "0" تنظیم کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # giryaii 1393-09-21 00:09
سلام من الآن یک سایت میسازم تکمیلش میکنم.
حالا اگر بخواهم درون سایتم مطلب ارسال کنم باید کدهای خودم را تغیر بدم یا باید از نرم افزار استفاده کرد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-09-21 11:22
سلام، متوجه سوالتون نشدم...! ولی باید بدونید که پایگاه داده جزء لاینفک یک سایت محسوب می شه، بنابراین زمانی که می خواهید ارسال مطلب داشته باشید، مطمئناً متن مورد نظر باید در پایگاه داده ذخیره بشه و نیازی به تغییر کدها وجود نداره ...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!