عندما تريد ان تضيف مساحة في العناصر الموجودة في الصفحة التي تقوم بتصميمها ,فإن أكثر الخصائص شائعة الاستخدام في الـ CSS هما الهامش margin و الحشو padding.
ولكن ما هو الفرق بين الهامش والحشو ؟
ومتى يجب عليك استخدام الهامش margin ؟
ومتى يجب عليك استخدام الحشو padding ؟
بعد قراءة هذه المقاله سوف تتعرف على الفرق بين الهامش والحشو , ومتى يمكنك استخدام كل واحد منهم.
يتحكم كل من الهامش والحشو في مقدار المساحة حول العنصر ، لكنهما يقومان بذلك بطرق مختلفة, كيف ذلك ؟
ما هو الفرق بين الهامش margin والحشو padding ؟
الهامش margin
هو المساحة الموجودة خارج العنصر. أي انها المسافة الموجودة بين العنصر والعناصر الاخرى من حوله.
على سبيل المثال لديك ثلاثة عناصر div وقمت بتحديد عرض كل واحدٍ منهم بنسبة 32%
HTML
<div>1st div</div>
<div>2nd div</div>
<div>3ed div</div>
CSS
div{
width: 32%;
height: 200px;
border: 1px solid;
display: inline-block;
}
سوف يكون الناتج كما في الشكل التالي :
اذا قمت بعمل هامش لاحد العناصر سوف يكون هذا الهامش خارج اطار العنصر
HTML
<div style="margin: 30px;">1st div</div>
<div>2nd div</div>
<div>3ed div</div>
وستكون النتيجة كما في الشكل التالي :
المساحة الملونه خارج العنصر الاول هي الهامش ,ونلاحظ ان الهامش ياخذ مساحة خارج العنصر .
إذا كنت تريد أن يكون عنصر ما بعيدًا عن العناصر الأخرى ، فقم بزيادة خاصية الهامش.
الحشو padding
هو المساحة الموجودة داخل العنصر. اي أنها المسافة الموجودة بين العنصر ومحتواه.
على سبيل المثال لديك ثلاثة عناصر من الـ div وقمت بتحديد عرض كل واحدٍ منهم بنسبة 32%
HTML
<div>1st div</div>
<div>2nd div</div>
<div>3ed div</div>
CSS
div{
width: 32%;
height: 200px;
border: 1px solid;
display: inline-block;
}
سوف تكون النتيجة كما في المثال السابق
اذا قمت بعمل حشو padding لاحد العناصر سوف تلاحظ أن المساحة موجودة داخل العنصر وليس خارجه كما في الهامش
CSS
div{
width: 32%;
height: 200px;
border: 1px solid;
display: inline-block;
padding: 30px;
}
ستكون النتيجة كما الشكل في التالي:
المساحة الملونه داخل العنصر هي الحشو.
يمكنك إضافة كود الهامش margin او الحشو padding اما في ملف الـ CSS أو في الـ HTML كـ in-line
