فهم Width وHeight وMargin وPadding
تعلّم كيف تحدد width وheight وmargin وpadding أبعاد العناصر وتباعدها.
فهم Width وHeight وMargin وPadding درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
مفهوم نموذج الصندوق
يُعرَض كل عنصر HTML على هيئة صندوق مستطيل. يصف نموذج الصندوق في CSS الطبقات الأربع التي يتكوّن منها هذا الصندوق من الداخل إلى الخارج: المحتوى ← الحشوة ← الحد ← الهامش.
width وheight
تحدّد width وheight أبعاد منطقة المحتوى. وبشكل افتراضي، تُضاف الحشوة والحد إلى هذه الأبعاد.
<div class="box"></div>
padding
الحشوة padding هي مساحة شفافة داخل الحد، بين المحتوى وحافة الحد. وهي جزء من مساحة العنصر القابلة للنقر والمطلية بالخلفية.
<div class="card">Card content</div>
الصيغ التفصيلية لـ padding
يمكن ضبط كل جانب على حدة:
<div class="element">Padded element</div>
margin
الهامش margin هو مساحة شفافة خارج الحد. ويدفع العناصر الأخرى بعيدًا. وتسحب الهوامش السالبة العناصر نحو بعضها أو تجعلها متداخلة.
<div class="section">Centered section with bottom margin</div>
انهيار الهوامش
تنهار الهوامش الرأسية بين العناصر الكتلية المتجاورة: وتكون الفجوة الفعلية مساوية للهامش الأكبر، لا لمجموع الهامشين. أما الهوامش الأفقية فلا تنهار مطلقًا.
<h2>Heading</h2>
<p>Paragraph below — margins collapse to 30px, not 50px.</p>
منع انهيار الهوامش
يُمنع انهيار الهوامش في الحالات التالية:
- العناصر أبناء لتخطيط flex أو grid
- يملك العنصر الأب
overflow: hidden - يملك العنصر الأب
paddingبينه وبين الابن الأول - يفصل عنصر مضمّن بين العنصرين الشقيقين
الهوامش auto
يؤدي ضبط الهوامش الأفقية على auto لعنصر كتلي ذي عرض ثابت إلى توسيطه داخل حاويته. وهذه هي تقنية التوسيط التقليدية.
<div class="centered">Centered block, max 800px wide</div>
min-width وmax-width وmin-height وmax-height
قيّد الأبعاد بحدود دنيا وعليا للحفاظ على قابلية قراءة العناصر عبر أحجام الشاشات المختلفة:
<div class="content">Readable content column capped at 65 characters wide.</div>
حساب الحجم الكلي للعنصر
في نموذج content-box الافتراضي، يكون العرض الكلي = width + padding-left + padding-right + border-left + border-right. وقد يكون هذا الأمر مفاجئًا، ولذلك يُفضَّل استخدام border-box.
خصائص الهوامش والحشوات المنطقية
يوفّر CSS الحديث بدائل منطقية مثل: margin-block وmargin-inline وpadding-block-start وغيرها. وتتكيّف هذه الخصائص تلقائيًا مع اتجاه الكتابة.
<div class="card">Logical padding-block/inline</div>
تحقق سريع
ما الطبقات التي يتضمنها العرض الكلي المُعروض لعنصر كتلي في نموذج الصندوق الافتراضي؟
خلاصة
طبقات نموذج الصندوق هي المحتوى، والحشوة، والحد، والهامش. تكون الحشوة داخل الحد، بينما يكون الهامش خارجه. وتنهار الهوامش الرأسية بين العناصر الشقيقة المتجاورة. استخدم margin: 0 auto مع عرض ثابت لتوسيط العناصر الكتلية.
الأسئلة الشائعة
هل درس «فهم Width وHeight وMargin وPadding» مجاني؟
نعم — نص درس «فهم Width وHeight وMargin وPadding» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «فهم Width وHeight وMargin وPadding»؟
تعلّم كيف تحدد width وheight وmargin وpadding أبعاد العناصر وتباعدها. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «فهم Width وHeight وMargin وPadding»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- فهم Width وHeight وMargin وPadding
- أنماط الحدود وعرضها ولونها
- Box-Sizing: Content-Box مقابل Border-Box
- Outline وBox-Shadow