x

ما هي لغة CSS ؟

ما هي الهوامش (Margins) والمسافات الداخلية (Padding) ، وكيف تعمل؟

نظري

تُعد خاصيتا الهامش (Margin) والحشوة (Padding) عنصرين أساسيين في لغة CSS لإنشاء صفحات ويب منظمة جيداً، وسهلة القراءة، وجذابة بصرياً.

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

لفهم الفروق بين الهامش margin والحشوة padding بشكل أفضل، دعنا نلقي نظرة على بعض الأمثلة.

إليك مثال بلغة HTML لثلاثة عناصر فقرة (paragraph) في الصفحة:


<p>الفقرة الأولى</p>
<p>الفقرة الثانية</p>
<p>الفقرة الثالثة</p>

معاينة:


خاصية الهامش margin

لتطبيق مسافة أعلى كل عنصر فقرة، يمكنك استخدام الخاصية margin-top على النحو التالي:

index.html


<link rel="stylesheet" href="styles.css">

<p>الفقرة الأولى</p>
<p>الفقرة الثانية</p>
<p>الفقرة الثالثة</p>

styles.css


p {
 margin-top: 20px;
 border: 2px solid black;
}

معاينة:


في هذا المثال، نُطبّق "هامشاً" (margin) بمقدار 20px على الجزء العلوي من كل عنصر فقرة فقط.

لدينا أيضاً "إطار أسود متصل" (solid black border) يحيط بالجهات الأربع، مما يتيح لك رؤية "الهامش" (margin) بشكل أوضح.

خصائص الهامش الأربع المختلفة هي: الهامش العلوي margin-top، والهامش الأيمن margin-right، والهامش السفلي margin-bottom، والهامش الأيسر margin-left.

إليك مثال على استخدام الخصائص الأربع جميعها:

index.html


<link rel="stylesheet" href="styles.css">

<span>الفقرة الأولى</span>
<p>الفقرة الثانية</p>
<span>الفقرة الثالثة</span>

styles.css


p {
 margin-top: 10px;
 margin-right: 20px;
 margin-bottom: 30px;
 margin-left: 40px;
 border: 2px solid black;
}

معاينة:


في هذا المثال، نقوم بتعيين قيم للمسافات على الجوانب الأربعة لعنصر الفقرة. كما تمت إضافة "إطار أسود متصل" (solid black border) لتتمكن من رؤية "الهوامش" (margins) بشكل أوضح.

اختصار الهامش margin

هناك طريقة أخرى لاستخدام خاصية الهامش margin وهي الصيغة المختصرة؛ إذ يمكنك تحديد قيمة واحدة أو قيمتين أو ثلاث أو أربع قيم دفعة واحدة. دعونا نستكشف هذه الخيارات معاً.

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

إليك مثال على استخدام قيمة واحدة في الخاصية المختصرة للهامش margin :

index.html


<link rel="stylesheet" href="styles.css">

<span>الفقرة الأولى</span>
<p>الفقرة الثانية</p>
<span>الفقرة الثالثة</span>

styles.css


p {
 margin: 10px;
}

معاينة:


سيُطبِّق مثال الكود هذا هامشاً margin بمقدار 10px بالتساوي على الجوانب الأربعة لعنصر الفقرة.

عند استخدام قيمتين، تُطبَّق القيمة الأولى على الجانبين "العلوي" top و"السفلي" bottom ، بينما تُطبَّق القيمة الثانية على الجانبين "الأيسر" left و"الأيمن" right للعنصر.

إليك مثال على استخدام قيمتين للاختصار الخاص بالهامش margin :

index.html


<link rel="stylesheet" href="styles.css">

<span>الفقرة الأولى</span>
<p>الفقرة الثانية</p>
<span>الفقرة الثالثة</span>

styles.css


p {
 margin: 10px 20px;
}

معاينة:


يُحدد هذا الإجراء "الهوامش" (margins) العلوية top والسفلية bottom لعنصر الفقرة بـ 10px، والهوامش اليمنى right واليسرى left بـ 20px.

إذا تم توفير "ثلاث قيم" (three values)، فإن القيمة الأولى تُطبَّق على الهامش العلوي (top margin) ، والقيمة الثانية على الهامشين الأيسر والأيمن (left and right margin) ، والقيمة الثالثة على الهامش السفلي (bottom margin).

إليك مثال لتوضيح الأمر بشكل أفضل:

index.html


<link rel="stylesheet" href="styles.css">

<span>الفقرة الأولى</span>
<p>الفقرة الثانية</p>
<span>الفقرة الثالثة</span>

styles.css


p {
 margin: 10px 20px 30px;
}

معاينة:


يُحدد هذا "الهامش" (margin) بـ 10px للأعلى top ، و 20px لليسار واليمين (left and right) ، و 30px للأسفل bottom.

عند استخدام "أربع قيم" (four values) ، يمنحك ذلك تحكماً أكبر، إذ يمكنك تحديد قيمة الهامش (margin) بشكل مستقل لكل جانب من جوانب العنصر المستهدف.

تُحدد القيمة الأولى الجهة العلوية top ، وتُحدد القيمة الثانية الجهة اليمنى right ، وتُحدد القيمة الثالثة الجهة السفلية bottom ، وتُحدد القيمة الرابعة الجهة اليسرى left.

إليك مثال على استخدام الاختصار الخاص بالهامش (margin) مع أربع قيم:

index.html


<link rel="stylesheet" href="styles.css">

<span>الفقرة الأولى</span>
<p>الفقرة الثانية</p>
<span>الفقرة الثالثة</span>

styles.css


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

معاينة:


يُحدد هذا الهامش (margin) بـ 10px للأعلى top ، و 20px لليمين right ، و 30px للأسفل bottom ، و 40px لليسار left.

خاصية الحشوة padding

تُستخدم الخاصية padding لإضافة مساحة داخل العنصر، بين المحتوى والحدود الخاصة به.

على غرار خاصية الهامش margin ، فإن خصائص الحشو padding الأربع هي: padding-top و padding-right و padding-bottom و padding-left.

إليك مثال على كيفية ضبط الهامش الداخلي padding لعنصر الفقرة:

index.html


<link rel="stylesheet" href="styles.css">

<span>الفقرة الأولى</span>
<p>الفقرة الثانية</p>
<span>الفقرة الثالثة</span>

styles.css


p {
 padding-top: 10px;
 padding-right: 20px;
 padding-bottom: 30px;
 padding-left: 40px;
 border: 2px solid black;
}

معاينة:


يُحدد هذا الهامش الداخلي padding بـ 10px للأعلى top ، و 20px لليمين right ، و 30px للأسفل bottom ، و 40px لليسار left .

كما ترى، تُطبَّق الحشوة padding على المحتوى الموجود داخل الحدود، بخلاف الهامش margin الذي يُطبَّق خارج الحدود.

اختصار الحشوة padding

تماماً مثل خاصية margin ، يمكنك أيضاً اختيار استخدام الصيغة المختصرة لخاصية padding .

يمكنك أيضاً تحديد قيمة واحدة أو اثنتين أو ثلاث أو أربع قيم للخاصية المختصرة padding.

إليك مثال على استخدام الصيغة المختصرة لخاصية الحشو padding لعنصر الفقرة المذكور سابقاً:

index.html


<link rel="stylesheet" href="styles.css">

<span>الفقرة الأولى</span>
<p>الفقرة الثانية</p>
<span>الفقرة الثالثة</span>

styles.css


p {
 padding: 10px 20px 30px 40px;
 border: 2px solid black;
}

معاينة:


في هذا المثال، وباستخدام الصيغة المختصرة، سيقوم الكود بتعيين الهامش الداخلي (padding) لعنصر الفقرة بحيث يكون 10px من الأعلى top ، و 20px من اليمين right ، و 30px من الأسفل bottom ، و 40px من اليسار left.

أسئلة :

ما هي خاصية CSS التي ستستخدمها لإنشاء مسافة بين حدود عنصر ما والعناصر المجاورة له؟

1. padding ❌

2. border ❌

3. margin ✅

4. width ❌


ما هي خاصية CSS التي ستستخدمها لإنشاء مسافة بين محتوى العنصر وحدوده؟

1. padding ✅

2. margin ❌

3. border ❌

4. height ❌


ما هو الترتيب الصحيح للقيم عند استخدام خاصية الاختصار (shorthand property) للهوامش margin أو الحشوة padding مع أربع قيم؟

1. left, right, top, bottom ❌

2. top, left, bottom, right ❌

3. top, right, bottom, left ✅

4. right, bottom, left, top ❌