Spacing — margin and padding
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
Space between boxes
- Margin is the space outside a box — the gap to its neighbours.
margin: 30px;adds 30 pixels on all four sides, outside the border.- Padding pushes the content in; margin pushes other boxes away.
العربية
المسافة بين الصناديق
- الهامش (Margin) هو المساحة الخارجية للصندوق — وهي الفجوة نحو جيرانه.
margin: 30px;يضيف 30 بكسل على جميع الجوانب الأربعة، خارج الحدود.- الحشو يدفع المحتوى للداخل؛ الهامش يدفع الصناديق الأخرى بعيداً.
English
One side at a time
- You can space just one side:
margin-top,margin-right,margin-bottom,margin-left. - The same works for padding:
padding-left: 10px;, and so on. margin-bottomunder a heading neatly separates it from the text.
العربية
جانب واحد في كل مرة
- يمكنك تحديد مسافة لجانب واحد فقط:
margin-top،margin-right،margin-bottom،margin-left. - نفس الأمر ينطبق على الحشو:
padding-left: 10px;، وهكذا. margin-bottomتحت العنوان يفصله بشكل مرتب عن النص.
<style>
.tag {
background-color: gold;
padding: 6px;
margin-right: 8px;
}
</style>
<span class="tag">news</span>
<span class="tag">sport</span>
English
Common mistakes
- Padding is inside the border; margin is the space outside it.
box-sizing: border-boxmakes the width include padding and border.
العربية
أخطاء شائعة
- الحشو يكون داخل الحدود؛ الهامش هو المساحة الخارجية عنها.
box-sizing: border-boxيجعل العرض يشمل الحشو والحدود.
English
Now you try
- Margin is the gap between boxes; padding is the space inside one.
- Add margin around a box, then space below a heading.
العربية
الآن جرب بنفسك
- الهامش هو الفاصلة بين الصناديق؛ الحشو هو المساحة داخل صندوق واحد.
- أضف هامشاً حول صندوق، ثم مسافة أسفل عنوان.
Explore · استكشف
margin vs padding
Padding is space inside the border; margin is space outside.
Push the boxes apart from each other. Add margin: 30px; to the .box rule.
Add space below the heading only. Add h1 { margin-bottom: 24px; }.