الهامش والحشو والحدود المنطقية
استبدل top وright وbottom وleft بنظائر الخصائص المنطقية start وend وblock وinline
الهامش والحشو والحدود المنطقية درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
المكافئات المنطقية للمسافات
للخصائص الفيزيائية للمسافات نظائر منطقية تستخدم اتجاهَي الكتلة والسطر المضمّن:
margin-top→margin-block-startmargin-bottom→margin-block-endmargin-left→margin-inline-startmargin-right→margin-inline-end
خصائص الاختصار المنطقية
تغطي خصائص الاختصار الجديدة جانبي الكتلة أو جانبي السطر المضمّن:
<div class="card">Card with logical spacing</div>
التوسيط باستخدام margin-inline: auto
أصبح لنمط التوسيط التقليدي مكافئ منطقي:
<div class="container">Centered container</div>
خصائص الحدود المنطقية
اضبط الحدود على الجوانب المنطقية:
<div class="card">Card with top border</div>
<blockquote class="quote">Quoted text with a gold side border</blockquote>
خصائص الموضع المنطقية
للخصائص المستخدمة في تحديد الموضع نظائر منطقية أيضًا:
top→inset-block-startbottom→inset-block-endleft→inset-inline-startright→inset-inline-end
اختصار inset
تُعد الخاصية inset اختصارًا منطقيًا لجميع الجوانب الأربعة. وتوفر inset-block وinset-inline تحكمًا في محورين.
<div class="wrap"><div class="overlay"></div></div>
خصائص التحجيم المنطقية
للعرض والارتفاع نظائر منطقية:
<div class="box">Sized box</div>
مقارنة: الفيزيائي مقابل المنطقي
شريط جانبي يحتوي على حد في جهة البداية:
<div class="sidebar-physical">Physical (border-left)</div>
<div class="sidebar-logical">Logical (border-inline-start)</div>
القيم المنطقية لـ float وclear
تدعم الخاصيتان float وclear الآن القيم المنطقية:
<div class="figure"></div><p>Text wraps around the floated figure.</p><div class="clear">Cleared element</div>
text-align المنطقي
يُعد text-align: start وtext-align: end بديلين منطقيين لـ left وright، ويتكيفان تلقائيًا مع اتجاه النص.
<div class="nav-link">Aligned to the start (left in LTR)</div>
استراتيجية الترحيل
بالنسبة إلى الشيفرة الجديدة، فضّل الخصائص المنطقية. أما في الشيفرة الحالية، فأعد هيكلة مكوّن واحد في كل مرة. وترتيب الأولوية للترحيل هو: المسافات (الهامش والحشو)، ثم الحدود، ثم التحجيم، ثم تحديد الموضع.
تحقق سريع
ما الخاصية المنطقية المكافئة لـ margin-left في تخطيط LTR، والتي ينبغي أن تصبح margin-right في RTL؟
مراجعة
تستخدم خصائص الهامش والحشو والحدود المنطقية في block وinline اتجاهَي الكتلة والسطر المضمّن بدلًا من top وright وbottom وleft الفيزيائية. وتغطي الاختصارات مثل margin-block وpadding-inline وinset-block الجانبين معًا. فضّل الخصائص المنطقية لجميع المسافات في الشيفرة الجديدة لتحصل تلقائيًا على دعم RTL وأنماط الكتابة العمودية.
الأسئلة الشائعة
هل درس «الهامش والحشو والحدود المنطقية» مجاني؟
نعم — نص درس «الهامش والحشو والحدود المنطقية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «الهامش والحشو والحدود المنطقية»؟
استبدل top وright وbottom وleft بنظائر الخصائص المنطقية start وend وblock وinline تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «الهامش والحشو والحدود المنطقية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- لماذا نستخدم الخصائص المنطقية: التدويل
- اتجاها الكتلة والسطر
- الهامش والحشو والحدود المنطقية
- الخصائص المنطقية في تخطيطات RTL