الخاصية Padding في لغة CSS
تسمح لنا الخاصية padding بتحديد التباعد بين محتوى عنصر وحدوده (أو حافة صندوق العنصر ، إذا لم يكن له حد محدد).
تتأثر المساحة المتروكة بلون خلفية العنصر background-color . على سبيل المثال ، إذا قمت بتحديد لون خلفية لعنصر ما ، فسيكون لون الخلفية مرئيًا من خلال منطقة المساحة المتروكة.
تحديد الحواشي لأحدى الجوانب
يمكننا تحديد الحواشي لإحدى الجوانب لعنصر ما مثل الجانب العلوي والأيمن والسفلي والأيسر باستخدام الخصائص padding-top و padding-right و padding-bottom و padding-left ، على التوالي. دعنا نجرب مثالًا لفهم كيفية عملها:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>تحديد الحواشي لأحدى الجوانب</title>
<style>
body {
direction : rtl;
text-align: right;
}
h1 {
padding-top: 50px;
padding-bottom: 100px;
background: #b3b3ff;
}
p {
padding-left: 75px;
padding-right: 75px;
background: #b3b3ff;
}
</style>
</head>
<body>
<h1>هذا عنوان</h1>
<p>هذه فقرة من النص.</p>
<p><strong>ملاحظة:</strong> قم بتغير قيم الخاصية padding لمعرفة كيفية عملها.</p>
</body>
</html>
المخرجات
يمكن تحديد قيم الخاصية padding باستخدام القيم التالية:
- الطول - بإستخدام احدى وحدات القياس التالية
px،em،rem،pt،cm، إلخ. - النسبة المئوية - يمكن تحديد قيم الخاصية
paddingبالنسبة المئوية٪بالنسبة لمحتوى العنصر. inherit- تحدد أن قيم الخاصيةpaddingيجب أن تورث من العنصر الأب.
بخلاف الهوامش margin ، لا يمكن أن تكون قيم الخاصية padding سالبة.
الخاصية المختصرة Padding
الخاصية padding هي خاصية مختصرة لتسهيل تحديد و ضبط الحواشي للجهات الاربع ، أي ، padding-top و padding-right و padding-bottom و padding-left.
دعنا نلقي نظرة على المثال التالي لفهم كيفية عملها:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>الخاصية المختصرة Padding</title>
<style>
body{
direction: rtl;
text-align: right;
}
h1 {
padding: 50px;
}
p {
padding: 25px 75px;
}
div {
padding: 25px 50px 75px;
}
pre {
padding: 25px 50px 75px 100px;
}
h1, p, div, pre {
background: #b3b3ff;
}
</style>
</head>
<body>
<h1>هذا عنوان</h1>
<p>هذه فقرة من نص</p>
<div>هذا عنصر DIV</div>
<pre>هذه فقرة من نص منسق مسبقا بإستخدام عنصر pre</pre>
<p><strong>ملاحظة:</strong> قم بتغير قيم الخاصية padding لمعرفة كيفية عملها.</p>
</body>
</html>
المخرجات
يمكن للخاصية المختصرة padding ان تأخد قيمة واحدة أو اثنتين أو ثلاثة أو أربعة مفصولة بمسافات.
- إذا تم تحديد قيمة واحدة: فسيتم تطبيقها على الجوانب الأربعة.
- إذا تم تحديد قيمتين : يتم تطبيق القيمة الأولى على الجانب العلوي والسفلي ، ويتم تطبيق القيمة الثانية على الجانب الأيمن والأيسر من صندوق العنصر.
- إذا تم تحديد ثلاث قيم : يتم تطبيق القيمة الأولى على الجانب العلوي ، ويتم تطبيق القيمة الثانية على الجانب الأيمن والأيسر ، ويتم تطبيق القيمة الأخيرة على الجانب السفلي.
- إذا تم تحديد أربع قيم: فسيتم تطبيقها على الجوانب العلوي و الأيمن و السفلي والأيسر من صندوق العنصر على التوالي بالترتيب المحدد.
يوصى باستخدام الخاصية المختصرة padding ، مما يؤدي إلى توفير بعض الوقت عن طريق تجنب الكتابة الإضافية وتسهيل مراجعة وصيانة كود CSS.
تأثير الحواشي والحدود على تخطيط صفحة الويب
عند إنشاء تخطيطات layouts لصفحة الويب ، تؤدي إضافة الحواشي أو الحدود إلى العناصر أحيانًا إلى نتيجة غير متوقعة ، لأنه تتم إضافة مساحة الحواشي والحدود إلى عرض وإرتفاع الصندوق الذي تم إنشاؤه بواسطة العنصر ، كما تعلمنا في درس نموذج الصندوق.
على سبيل المثال ، إذا قمنا بتحديد عرض عنصر <div> بـ 100٪ وقمنا أيضًا بتطبيق حواشي يمنى ويسرى أو حدود عليه ، فسيظهر شريط التمرير الأفقي.
دعونا نرى مثالا:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>تأثير الحواشي على حجم صندوق العناصر</title>
<style>
body {
direction: rtl;
text-align: right;
}
div {
width: 100%;
padding: 25px;
background: #d9b3ff;
}
</style>
</head>
<body>
<div>
<h1>هذا عنصر DIV</h1>
</div>
<p><strong> لاحظ شريط التمرير أسفل صفحة الويب.</strong></p>
</body>
</html>
المخرجات
لمنع مساحة الحواشي والحدود من تغيير عرض وارتفاع صندوق العنصر ، يمكننا استخدام الخاصية box-sizing. في المثال التالي ، سيظل عرض وارتفاع صندوق العنصر <div> دون تغيير ، ومع ذلك ، ستقل مساحة المحتوى مع زيادة المساحة للحواشي أو الحدود.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>منع التغيير في أبعاد صندوق العنصر</title>
<style>
body {
direction: rtl;
text-align: right;
}
div {
width: 100%;
padding: 25px;
box-sizing: border-box;
background: violet;
}
</style>
</head>
<body>
<div>
<h1>هذا عنصر DIV</h1>
</div>
<p><strong>لاحظ، هذه المرة لا يوجد شريط تمرير أسفل صفحة الويب.</strong></p>
</body>
</html>
المخرجات
