سبد (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 حاشیه بالای یک عنصر را مشخص می کند.

آموزش صوتی CSS

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

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

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه