سیاساس/margin
| عرض و ارتفاع | margin | فاصله درونی |
| سیاساس |
مقدمه
[ویرایش]در CSS، ویژگی margin برای تنظیم فاصلهی بیرونی عناصر از یکدیگر استفاده میشود. این ویژگی یکی از مهمترین ابزارها برای چیدمان عناصر در صفحه است و در کنار ویژگیهایی مثل padding و border نقش کلیدی در طراحی رابط کاربری و تجربه کاربری دارد.
تعریف
[ویرایش]margin فضای خارجی اطراف یک عنصر را مشخص میکند؛ یعنی فاصلهٔ آن عنصر تا عناصر دیگر یا لبهٔ صفحه.
نحو (Syntax)
[ویرایش]margin: [top] [right] [bottom] [left];
مثال:
margin: 10px 20px 15px 5px;
↑ یعنی:
- بالا: ۱۰px
- راست: ۲۰px
- پایین: ۱۵px
- چپ: ۵px
اگر فقط یک مقدار نوشته شود، برای همهٔ جهات اعمال میشود.
مقادیر قابل قبول
[ویرایش]- مقادیر ثابت:
px،em،rem،%و ... - مقدار
auto: معمولاً برای مرکزچین کردن عناصر افقی مانند یکdivاستفاده میشود. - مقدار
inherit: مقدار از عنصر والد به ارث میرسد. - مقدار
initial: مقدار پیشفرض مرورگر
مثال ساده
[ویرایش]<div style="margin: 20px;">
سلام دنیا!
</div>
ویژگیهای مرتبط
[ویرایش]برای کنترل مجزای هر جهت:
margin-top: 20px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 5px;
مثال: مرکزچین کردن یک div
[ویرایش]<div style="width: 300px; margin: 0 auto;">
این div به صورت افقی مرکزچین شده است.
</div>
تفاوت margin و padding
[ویرایش]| ویژگی | margin | padding |
|---|---|---|
| تعریف | فاصلهٔ بیرونی عنصر | فاصلهٔ درونی تا محتوای عنصر |
| تاثیر بر پسزمینه | در ناحیهٔ margin رنگ پسزمینه دیده نمیشود | در ناحیهٔ padding رنگ پسزمینه دیده میشود |
| امکان استفادهٔ auto | بله، برای مرکزچین | خیر |
نکات کاربردی برای طراحی
[ویرایش]- استفاده از
margin: auto;بسیار مناسب برای مرکزچین کردن عناصر بلاک در عرض مشخص است. - در طراحی ریسپانسیو، بهتر است از واحدهایی مانند
%یاremبه جایpxاستفاده شود. - رعایت نظم در استفاده از margin (مثلاً استفاده از فاصلههای ۴، ۸، ۱۲، ۱۶، ...) به طراحی هماهنگتر کمک میکند.
- استفاده زیاد از margin میتواند به مشکلات تداخل فضای خالی (Collapsing Margins) منجر شود.
نکته مهم: Collapsing Margins
[ویرایش]در HTML/CSS، زمانی که دو عنصر بلاک پشت سر هم قرار میگیرند و هر دو margin بالا/پایین دارند، مرورگر فقط بزرگترین آنها را اعمال میکند، نه مجموعشان.
<div style="margin-bottom: 20px;"></div>
<div style="margin-top: 30px;"></div>
<!-- فاصله واقعی بین این دو div برابر 30px است نه 50px -->
تمرین: فاصله دادن به کارتها
[ویرایش]<div style="margin: 1rem; padding: 1rem; border: 1px solid #ccc;">
کارت شماره ۱
</div>
<div style="margin: 1rem; padding: 1rem; border: 1px solid #ccc;">
کارت شماره ۲
</div>
جمعبندی
[ویرایش]ویژگی margin یکی از کلیدیترین ابزارها در طراحی صفحات وب است. استفادهٔ مناسب از آن باعث نظم بصری، خوانایی بهتر، و رابط کاربری حرفهایتر میشود. درک تفاوت آن با padding و آشنایی با ویژگیهای مرتبط مانند auto و collapsing margins برای طراحی حرفهای ضروری است.