10- (Padding) في CSS فراغ داخلي

الوظيفة: يُستخدم التبطين لإنشاء مساحة فارغة حول محتوى العنصر، داخل أي حدود محددة.

الفراغ الداخلي (Padding) في CSS

تعريف:

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

خصائص الفراغ الداخلي:

توفر CSS تحكمًا كاملاً في الفراغ الداخلي. توجد خصائص لتعيين الفراغ الداخلي لكل جانب من العنصر (علوي، يمين، أسفل، يسار).

خصائص الفراغ الداخلي الفردية:

• padding-top: لتحديد الفراغ الداخلي العلوي.
• padding-right: لتحديد الفراغ الداخلي الأيمن.
• padding-bottom: لتحديد الفراغ الداخلي السفلي.
• padding-left: لتحديد الفراغ الداخلي الأيسر.

قيم خصائص الفراغ الداخلي:

• length: يحدد الفراغ الداخلي بوحدات مثل بيكسل ونقطة وسنتيمتر وما إلى ذلك.
• %: يحدد الفراغ الداخلي كنسبة مئوية من عرض العنصر الحاوي.
• inherit: يحدد أن يتم توريث الفراغ الداخلي من العنصر الأب.

ملاحظة:

• القيم السلبية غير مسموح بها.

مثال:

تعيين فراغ داخلي مختلف لجميع جوانب عنصر <div>:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

الفراغ الداخلي (Padding) – خاصية مختصرة

لتقصير الكود، يمكنك تحديد جميع خصائص الفراغ الداخلي في خاصية واحدة.

خاصية padding هي اختصار للخصائص الفردية التالية:

• padding-top
• padding-right
• padding-bottom
• padding-left

كيف تعمل:

• إذا احتوت خاصية padding على أربع قيم:

padding: 25px 50px 75px 100px;

• فراغ داخلي علوي: 25px
• فراغ داخلي أيمن: 50px
• فراغ داخلي سفلي: 75px
• فراغ داخلي يسار: 100px
• إذا احتوت خاصية padding على ثلاث قيم:

padding: 25px 50px 75px;

• فراغ داخلي علوي: 25px
• فٌراغ داخلي يمين ويسار: 50px
• فراغ داخلي سفلي: 75px
• إذا احتوت خاصية padding على قيمتين:

padding: 25px 50px;

• فراغ داخلي علوي وسفلي: 25px
• فراغ داخلي يمين ويسار: 50px
• إذا احتوت خاصية padding على قيمة واحدة:

padding: 25px;

• جميع فٌرغات الداخلية: 25px

الفراغ الداخلي وعرض العنصر في CSS

تحدد خاصية width في CSS عرض منطقة محتوى العنصر. منطقة المحتوى هي الجزء الموجود داخل التبطين والحدود والحاشية للعنصر (نموذج الصندوق).

بالتالي، إذا كان لدى عنصر عرض محدد، فإن التبطين المضاف إلى ذلك العنصر سيزيد من العرض الإجمالي للعنصر. وهذا غالبًا ما يؤدي إلى نتيجة غير مرغوبة.

مثال:

في هذا المثال، تم منح عنصر <div> عرضًا يبلغ 300 بكسل. ومع ذلك، سيكون العرض الفعلي لعنصر <div> هو 350 بكسل (300 بكسل + 25 بكسل من التبطين الأيسر + 25 بكسل من التبطين الأيمن):

div {
  width: 300px;
  padding: 25px;
}

جرب بنفسك

لحفظ العرض عند 300 بكسل، بغض النظر عن مقدار التبطين، يمكنك استخدام خاصية box-sizing. يؤدي هذا إلى إبقاء العنصر على عرضه الفعلي؛ وإذا زادت التبطين، فسوف تقل مساحة المحتوى المتاح.

مثال:

استخدم خاصية box-sizing للحفاظ على العرض عند 300 بكسل، بغض النظر عن مقدار التبطين:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}