الحواشي Padding
تسجيل الدخول
الخاصية Padding في لغة CSS
تسمح لنا الخاصية padding بتحديد التباعد بين محتوى عنصر وحدوده (أو حافة صندوق العنصر ، إذا لم يكن له حد محدد).
تتأثر المساحة المتروكة بلون خلفية العنصر background-color . على سبيل المثال ، إذا قمت بتحديد لون خلفية لعنصر ما ، فسيكون لون الخلفية مرئيًا من خلال منطقة المساحة المتروكة.
تحديد الحواشي لأحدى الجوانب
يمكننا تحديد الحواشي لإحدى الجوانب لعنصر ما مثل الجانب العلوي والأيمن والسفلي والأيسر باستخدام الخصائص padding-top و padding-right و padding-bottom و padding-left ، على التوالي. دعنا نجرب مثالًا لفهم كيفية عملها:
- h1 {
- padding-top: 50px;
- padding-bottom: 100px;
- }
- p {
- padding-left: 75px;
- padding-right: 75px;
- }
يمكن تحديد قيم الخاصية padding باستخدام القيم التالية:
- الطول - بإستخدام احدى وحدات القياس التالية
px،em،rem،pt،cm، إلخ. - النسبة المئوية - يمكن تحديد قيم الخاصية
paddingبالنسبة المئوية٪بالنسبة لمحتوى العنصر. inherit- تحدد أن قيم الخاصيةpaddingيجب أن تورث من العنصر الأب.
بخلاف الهوامش margin ، لا يمكن أن تكون قيم الخاصية padding سالبة.
الخاصية المختصرة Padding
الخاصية padding هي خاصية مختصرة لتسهيل تحديد و ضبط الحواشي للجهات الاربع ، أي ، padding-top و padding-right و padding-bottom و padding-left.
دعنا نلقي نظرة على المثال التالي لفهم كيفية عملها:
- h1 {
- padding: 50px;
- }
- p {
- padding: 25px 75px;
- }
- div {
- padding: 25px 50px 75px;
- }
- pre {
- padding: 25px 50px 75px 100px;
- }
يمكن للخاصية المختصرة padding ان تأخد قيمة واحدة أو اثنتين أو ثلاثة أو أربعة مفصولة بمسافات.
- إذا تم تحديد قيمة واحدة: فسيتم تطبيقها على الجوانب الأربعة.
- إذا تم تحديد قيمتين : يتم تطبيق القيمة الأولى على الجانب العلوي والسفلي ، ويتم تطبيق القيمة الثانية على الجانب الأيمن والأيسر من صندوق العنصر.
- إذا تم تحديد ثلاث قيم : يتم تطبيق القيمة الأولى على الجانب العلوي ، ويتم تطبيق القيمة الثانية على الجانب الأيمن والأيسر ، ويتم تطبيق القيمة الأخيرة على الجانب السفلي.
- إذا تم تحديد أربع قيم: فسيتم تطبيقها على الجوانب العلوي و الأيمن و السفلي والأيسر من صندوق العنصر على التوالي بالترتيب المحدد.
يوصى باستخدام الخاصية المختصرة padding ، مما يؤدي إلى توفير بعض الوقت عن طريق تجنب الكتابة الإضافية وتسهيل مراجعة وصيانة كود CSS.
تأثير الحواشي والحدود على تخطيط صفحة الويب
عند إنشاء تخطيطات layouts لصفحة الويب ، تؤدي إضافة الحواشي أو الحدود إلى العناصر أحيانًا إلى نتيجة غير متوقعة ، لأنه تتم إضافة مساحة الحواشي والحدود إلى عرض وإرتفاع الصندوق الذي تم إنشاؤه بواسطة العنصر ، كما تعلمنا في درس نموذج الصندوق.
على سبيل المثال ، إذا قمنا بتحديد عرض عنصر <div> بـ 100٪ وقمنا أيضًا بتطبيق حواشي يمنى ويسرى أو حدود عليه ، فسيظهر شريط التمرير الأفقي.
دعونا نرى مثالا:
- div {
- width: 100%;
- padding: 25px;
- }
لمنع مساحة الحواشي والحدود من تغيير عرض وارتفاع صندوق العنصر ، يمكننا استخدام الخاصية box-sizing. في المثال التالي ، سيظل عرض وارتفاع صندوق العنصر <div> دون تغيير ، ومع ذلك ، ستقل مساحة المحتوى مع زيادة المساحة للحواشي أو الحدود.
- div {
- width: 100%;
- padding: 25px;
- box-sizing: border-box;
- }