تحجيم صندوق CSS
تحجيم صندوق CSS
تتيح لنا خاصية CSS box-sizingتضمين المساحة المتروكة والحد في العرض والارتفاع الكلي للعنصر.
بدون خاصية تغيير حجم الصندوق في CSS
افتراضيًا ، يتم حساب عرض العنصر وارتفاعه كما يلي:
العرض + الحشو + الحدود = العرض الفعلي
لارتفاع العنصر + الحشو + الحد = الارتفاع الفعلي للعنصر
هذا يعني: عند تعيين عرض / ارتفاع عنصر ما ، غالبًا ما يظهر العنصر أكبر مما قمت بتعيينه (لأن حد العنصر والحشو يضافان إلى العرض / الارتفاع المحدد للعنصر).
يوضح الرسم التوضيحي التالي عنصرين من نوع <div> لهما نفس العرض والارتفاع المحددين:
ينتهي الأمر بعنصري <div> أعلاه بأحجام مختلفة في النتيجة (لأن div2 يحتوي على مساحة متروكة محددة):
مثال
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
الخاصية تحل هذه box-sizingالمشكلة.
مع خاصية box-sizing في CSS
تسمح box-sizingلنا الخاصية بتضمين المساحة المتروكة والحد في العرض والارتفاع الكليين للعنصر.
إذا قمت بالتعيين box-sizing: border-box;على عنصر ، فسيتم تضمين المساحة المتروكة والحد في العرض والارتفاع:
إليك نفس المثال أعلاه ، مع box-sizing: border-box;
إضافة إلى عنصري <div>:
مثال
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
نظرًا لأن نتيجة استخدام box-sizing: border-box;الأمر أفضل بكثير ، يريد العديد من المطورين أن تعمل جميع العناصر الموجودة في صفحاتهم بهذه الطريقة.
يضمن الكود أدناه أن يتم تغيير حجم جميع العناصر بهذه الطريقة الأكثر سهولة. تستخدم العديد من المتصفحات بالفعل box-sizing: border-box;للعديد من عناصر النموذج (ولكن ليس كلها - ولهذا السبب تبدو المدخلات ومناطق النص مختلفة في العرض: 100٪ ؛).
تطبيق هذا على جميع العناصر آمن وحكيم:
مثال
* {
box-sizing: border-box;
}
خاصية CSS Box Sizing
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |