The box model
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · تحتاج هذه الصفحة إلى متصفح حديث (يدعم SharedArrayBuffer). يرجى تحديث Chrome أو Edge أو Firefox أو Safari إلى أحدث إصدار.
English
Every box has layers
- CSS treats every element as a box.
- Content is your text or image. Padding is space inside, around the content.
- Border is a line around the padding. Margin is space outside, pushing other boxes away.
العربية
كل مربع له طبقات
- تعامل CSS مع كل عنصر على أنه مربع.
- المحتوى هو النص أو الصورة الخاص بك. والتنسيق الداخلي (Padding) هو المساحة الداخلية، حول المحتوى.
- الحدود (Border) هي خط يحيط بالحشو. الهامش (Margin) هو مساحة خارجية تدفع صناديق أخرى بعيدًا.
English
Padding and border
padding: 20px;adds 20 pixels of space inside, on all four sides.border: 2px solid black;draws a line — its width, style, then colour.- Padding makes a box feel roomy; a border makes it stand out.
العربية
الحشو والحدود
padding: 20px;يضيف 20 بكسل من المساحة الداخلية، على جميع الجوانب الأربعة.border: 2px solid black;يرسم خطًا — ثم عرضه، أسلوبه، وبعدها لونه.- الحشو يجعل الصندوق يبدو واسعاً؛ الحدود تجعله يبرز.
<style>
.card {
background-color: #eef;
padding: 16px;
border: 2px solid #88a;
}
</style>
<div class="card">A comfy padded card.</div>
English
Common mistakes
- The box model is content, then padding, then border, then margin (inside to outside).
- Padding adds space inside the border.
العربية
أخطاء شائعة
- نموذج الصندوق يتكون من المحتوى، ثم الحشو، ثم الحدود، ثم الهامش (من الداخل إلى الخارج).
- الحشو يضيف مساحة داخل الحدود.
English
Now you try
- Padding is inside; the border sits around it.
- Add padding to a box, then a border.
العربية
الآن جرب بنفسك
- الحشو يكون داخلياً؛ بينما تقع الحدود حوله.
- أضف الحشو للصندوق، ثم أضف الحدود.
Explore · استكشف
The CSS box model
Every box is content + padding + border + margin around it.
Give the box some breathing room inside. Add padding: 20px; to the .box rule.
Draw a line around the box. Add border: 2px solid navy; to the .box rule — keep the three parts in that order: width, style, colour.