انتقل إلى محتوى الدرس

CSS box sizing content box خاصية box-sizing مع قمية content-box في لغة CSS

سوف تتعلم في هذا الدرس خاصية box-sizing في لغة CSS ووظيفيتها وكيفية استخدامها صفحة الويب وجميع القيم الخاصة بها.

1 صفوف تعليمية
لغة CSS
10,185 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تستخدم خاصية box-sizing مع القيمة content-box  لكي يتمدد حجم (طول وعرض) العنصر عندما يتم إضافة border وإضافة padding له يزيد حجم عرض وحجم الطول عن الحجم المحدد له في خاصية height وخاصية width وهي القيمة الأفتراضية.

CSS box sizing content box

خاصية box-sizing معالقيمة content-box في لغة CSS.

HTML
.item
{
  background-color: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  width:300px;
  height:200px;
}