الهوامش والحشوات في CSS: دليل المبتدئين

مقدمة

يقدم CSS أدوات مرنة للتحكم في المساحة حول العناصر وبينها. الهامش (margin) والحشوة (padding) هما من أكثر هذه الأدوات شيوعًا وفائدة. في هذا المقال، سنستكشف كيفية استخدام هذه الخصائص في CSS.

خاصية الهامش في CSS (CSS margin property)

تستخدم خاصية الهامش في CSS لإنشاء المساحة حول العناصر، خارج حدودها. يمكن تعيين القيمة باستخدام البكسل، أو النسب المئوية، أو auto.

div {
  margin: 10px;
}

في هذا المثال، ستحتوي جميع العناصر من نوع div على هامش 10 بكسل حولها.

خاصية الحشوة في CSS (CSS padding property)

تستخدم خاصية الحشوة في CSS لإنشاء مساحة حول محتوى العنصر، داخل حدوده. تعيين القيمة يمكن أن يتم باستخدام البكسل أو النسب المئوية.

div {
  padding: 20px;
}

في هذا المثال، ستحتوي جميع العناصر من نوع div على حشوة بمقدار 20 بكسل حول محتواها.

خصائص الهامش والحشوة للجوانب الفردية في CSS (CSS margin/padding properties for individual sides)

تسمح لك CSS بتعيين الهامش والحشوة لكل جانب من جوانب العنصر بشكل فردي. يمكن استخدام الخصائص margin-top، margin-right، margin-bottom، و margin-left لتعيين الهوامش، والخصائص padding-top، padding-right، padding-bottom، و padding-left لتعيين الحشوات.

div {
  margin-top: 10px;
  margin-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
}

قيم خاصية الهامش والحشوة في CSS (CSS margin/padding property values)

كما ذكرنا سابقاً، يمكن تحديد قيم الهامش والحشوة باستخدام الوحدات المطلقة مثل البكسل (px) أو الوحدات النسبية مثل النسبة المئوية (%). إذا تم تحديدها بالنسبة المئوية، يتم حساب القيمة بناءً على عرض العنصر الأب.

div {
  margin: 5%;
  padding: 10%;
}

في هذا المثال، ستكون الهوامش والحشوات نسبة مئوية من عرض العنصر الأب.

قيمة auto للهامش في CSS (CSS margin auto value)

يمكن استخدام قيمة “auto” لخاصية الهامش لتوزيع المساحة المتبقية بالتساوي على الجوانب. هذا مفيد جداً لتوسيط العناصر.

div {
  width: 50%;
  margin: auto;
}

في هذا المثال، العنصر div سيكون متوسطًا داخل العنصر الأب.

القيم السالبة للهامش في CSS (CSS margin’s negative values)

تقبل خاصية الهامش في CSS القيم السالبة. يمكن استخدام هذه القيم السالبة لتجاوز العناصر الأخرى أو لتحريك عنصر خارج حدوده الطبيعية.

div {
  margin-top: -10px;
}

في هذا المثال، سيتم تحريك العنصر div 10 بكسل أعلى من موقعه الطبيعي.

انهيار الهوامش في CSS (CSS margin collapse)

تحدث ظاهرة انهيار الهوامش عندما يلتقي هامشين عموديين. بدلاً من أن يتم إضافتهما معًا، يتم استخدام الهامش الأكبر فقط.

div.first {
  margin-bottom: 20px;
}
div.second {
  margin-top: 30px;
}

في هذا المثال، بدلاً من أن يكون الفراغ بين العناصر 50 بكسل (20px + 30px)، سيكون فقط 30 بكسل، وهو الهامش الأكبر.

خاصية الهامش الاختصارية في CSS (CSS margin shorthand property)

خاصية الهامش الاختصارية في CSS تتيح لك تعيين الهوامش للأعلى واليمين والأسفل واليسار في خط واحد.

div {
  margin: 10px 20px 30px 40px;
}

في هذا المثال، الهامش الأعلى هو 10px، الهامش الأيمن هو 20px، الهامش الأسفل هو 30px، والهامش الأيسر هو 40px.

خاصية الحشوة الاختصارية في CSS (CSS padding shorthand property)

بالمثل، يمكن استخدام خاصية الحشوة الاختصارية لتعيين الحشوة للأعلى واليمين والأسفل واليسار في خط واحد.

div {
  padding: 10px 20px 30px 40px;
}

في هذا المثال، الحشوة العلوية هي 10px، الحشوة اليمنى هي 20px، الحشوة السفلية هي 30px، والحشوة اليسرى هي 40px.

خاصية الحشوة العلوية في CSS (CSS padding-top property)

خاصية الحشوة العلوية تحدد المساحة بين الحد العلوي لعنصر ومحتواه. يمكن تحديد القيمة بالبكسل أو النسبة المئوية أو الوحدات الأخرى.

div {
  padding-top: 20px;
}

في هذا المثال، تم تعيين الحشوة العلوية للعنصر div إلى 20 بكسل.

خاصية الحشوة في CSS (CSS padding property)

خاصية الحشوة الاختصارية في CSS تسمح لك بتعيين قيم الحشوة لكل الجوانب في سطر واحد.

div {
  padding: 10px 15px 20px 25px;
}

في هذا المثال، الحشوة العلوية هي 10px، الحشوة اليمنى هي 15px، الحشوة السفلية هي 20px، والحشوة اليسرى هي 25px.

خاصية الهامش في CSS (CSS margin property)

خاصية الهامش في CSS تحدد المساحة حول العناصر. الهامش لا يؤثر على المحتوى الداخلي للعنصر، ولكنه يحدد المساحة بين العناصر.

div {
  margin: 10px 20px 30px 40px;
}

في هذا المثال، الهامش العلوي هو 10px، الهامش الأيمن هو 20px، الهامش السفلي هو 30px، والهامش الأيسر هو 40px.

الأسئلة المتكررة