Logical Margin، Padding و Border

اعمال عملی محورها: Logical Margin، Padding و Border

در دو درس قبل، مفهوم Block Axis و Inline Axis رو از نظر تئوری کامل دیدیم. حالا وقتشه این مفاهیم رو با Propertyهای واقعی CSS ترکیب کنیم و ببینیم چطور می‌شه Margin، Padding و Border رو، به‌جای جهت فیزیکی، بر اساس این دو محور منطقی تعریف کرد.

یادآوری سریع: نسخه فیزیکی این Propertyها

.box {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
}

در فصل ۴، این چهار Property فیزیکی رو کامل دیدیم. حالا معادل منطقی هرکدوم رو می‌بینیم.

Logical Margin

.box {
  margin-block-start: 10px;
  margin-inline-end: 15px;
  margin-block-end: 10px;
  margin-inline-start: 15px;
}

Property فیزیکی	Property منطقی معادل
margin-top	margin-block-start
margin-bottom	margin-block-end
margin-left (در LTR)	margin-inline-start
margin-right (در LTR)	margin-inline-end

همون‌طور که از اسم‌ها مشخصه، الگوی نام‌گذاری کاملاً منطقیه: نام محور (block یا inline) به‌همراه نقطه (start یا end)، دقیقاً بین margin و این دو کلمه قرار می‌گیره.

شورت‌هند margin-block و margin-inline

.box {
  margin-block: 10px;
  margin-inline: 15px;
}

دقیقاً مثل چیزی که در فصل ۴ با شورت‌هند margin دیدیم، اینجا هم دو شورت‌هند وجود داره: margin-block هم‌زمان margin-block-start و margin-block-end رو با یک مقدار تنظیم می‌کنه؛ و margin-inline هم‌زمان margin-inline-start و margin-inline-end رو.

.box {
  margin-block: 10px 20px;
}

این شورت‌هند می‌تونه دو مقدار هم بگیره: مقدار اول برای Start و مقدار دوم برای End. در این مثال، margin-block-start برابر 10px و margin-block-end برابر 20px خواهد بود.

Logical Padding

.card {
  padding-block-start: 20px;
  padding-inline-end: 24px;
  padding-block-end: 20px;
  padding-inline-start: 24px;
}

دقیقاً همون الگو، برای padding هم صادقه؛ فقط کافیه اسم Property فیزیکی رو با معادل منطقی جایگزین کنیم.

.card {
  padding-block: 20px;
  padding-inline: 24px;
}

و شورت‌هندش هم دقیقاً به همون شکل کار می‌کنه: padding-block برای بالا و پایین (از نظر منطقی)، و padding-inline برای شروع و پایان متن.

Logical Border

.notification {
  border-inline-start: 4px solid crimson;
}

این دقیقاً همون مثالیه که در درس ۱۱-۱ دیدیم؛ به‌جای border-left، از border-inline-start استفاده کردیم. این نوار رنگی، در حالت LTR سمت چپ، و در حالت RTL سمت راست ظاهر می‌شه؛ همیشه دقیقاً «در طرف شروع متن».

کنترل هر بخش از Border به‌طور مستقل

.box {
  border-block-start-width: 2px;
  border-block-start-style: dashed;
  border-block-start-color: teal;
}

دقیقاً مثل نسخه فیزیکی که در فصل ۹ دیدیم (border-top-width، border-top-style و مشابه‌ها)، هر جهت منطقی Border هم می‌تونه به سه بخش Width، Style و Color، کاملاً مستقل، تجزیه بشه.

یک مثال کامل و مقایسه‌ای

/* روش فیزیکی سنتی */
.alert-physical {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-left: 4px solid orange;
}

/* روش منطقی مدرن */
.alert-logical {
  margin-block-end: 16px;
  padding-block: 12px;
  padding-inline: 16px;
  border-inline-start: 4px solid orange;
}

<div class="alert-logical" dir="ltr">این هشدار در حالت LTR است.</div>
<div class="alert-logical" dir="rtl">این هشدار در حالت RTL است.</div>

در نسخه فیزیکی، نوار نارنجی همیشه سمت چپ می‌مونه، حتی در حالت RTL (که احتمالاً اشتباهه). در نسخه منطقی، بدون نیاز به هیچ Rule اضافه‌ای، این نوار به‌طور خودکار در سمت درست (سمت شروع متن) قرار می‌گیره؛ چه سند LTR باشه، چه RTL.

چرا این Propertyها الان اهمیت عملی بیشتری دارند؟

با توجه به این‌که این دوره، به زبان فارسی و برای یک وب‌سایت فارسی‌زبانه، ممکنه این سؤال پیش بیاد که «چرا اصلاً باید نگران LTR باشیم؟». جواب اینه: حتی در یک پروژه کاملاً RTL، استفاده از Logical Properties به‌جای معادل فیزیکی، باز هم توصیه می‌شه؛ چون کد، دقیق‌تر و مفهومی‌تر می‌شه (مثلاً margin-inline-start دقیقاً می‌گه «فاصله از طرف شروع متن»، که برای یک متن فارسی، همون سمت راسته؛ به‌جای اینکه مجبور باشیم حساب کنیم و بنویسیم margin-right). این نکته، دقیقاً همونیه که در درس ۱۱-۱ هم بهش اشاره کردیم.

نکات مهم

• هر Property فیزیکی margin، padding و border، یک معادل منطقی دارد که با ترکیب block/inline و start/end ساخته می‌شود.
• شورت‌هندهای margin-block، margin-inline، padding-block و padding-inline، امکان تنظیم هم‌زمان هر دو نقطه (Start و End) یک محور را فراهم می‌کنند.
• استفاده از Logical Properties، حتی در پروژه‌های کاملاً یک‌زبانه، کد را مفهومی‌تر و آماده برای تغییرات آینده می‌کند.

اشتباهات رایج

• قاطی کردن ترتیب Start و End در شورت‌هندهای دو‌مقداری (مثل margin-block: 10px 20px)، که ترتیبش Start سپس End است.
• ادامه استفاده از Propertyهای فیزیکی در پروژه‌های جدید، بدون توجه به مزایای بلندمدت Logical Properties.
• فراموش کردن این‌که border-inline-start و مشابه‌هایش، دقیقاً همان سه بخش Width، Style و Color را دارند که نسخه فیزیکی داشت.

جمع‌بندی

هر Property فیزیکی مرتبط با Margin، Padding و Border، یک معادل منطقی دارد که با ترکیب نام محور (block یا inline) و نقطه (start یا end) ساخته می‌شود؛ مثل margin-inline-start یا padding-block-end. این Propertyها، همراه با شورت‌هندهای مربوطه‌شان (margin-block، padding-inline و مشابه‌ها)، امکان نوشتن CSS‌ای رو فراهم می‌کنن که به‌طور خودکار با جهت نوشتار سند هماهنگ می‌شه، بدون نیاز به بازنویسی جداگانه برای هر جهت.