الخاصية width

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

الخاصية width في CSS تُحدِّد عرض أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد عرض منطقة المحتوى (content area)، لكن إن كانت الخاصية box-sizing مضبوطة إلى border-box فستُحدِّد عرض العنصر بدءًا من الحافة الخارجية للإطار.

بطاقة الخاصية

القيمة الابتدائية auto
تُطبَّق على جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة.
قابلة للوراثة لا
قابلة للتحريك نعم
القيمة المحسوبة نسبة مئوية أو طول مطلق أو الكلمة المحجوزة auto.
/* كلمة محجوزة */
width: auto;

/* <length> أطوال */
width: 120px;
width: 10em;

/* <percentage> نسب مئوية */
width: 75%;

/* قيم عامة */
width: inherit;
width: initial;
width: unset;
الخاصيتان min-width و max-width لهما الأولوية على الخاصية width.

أمثلة

مثال عن استخدام الأطوال المطلقة <length> مع الخاصية width لتحديد عرض العناصر:
<div class="px_length">px العرض مقاس بالواحدة بكسل</div>
<div class="em_length">em العرض مقاس بالواحدة </div>
شيفرة CSS:
div {
  border: 1px solid black;
  padding: 1em;
  margin: 1em;
}
.px_length {
  width: 200px;
}

.em_length {
  width: 20em;
}
أما هذا المثال فهو يضبط عرض width العنصر باستخدام النسب المئوية، تذكَّر أنَّ القيمة ستكون نسبةً إلى عرض العنصر الحاوي على العنصر الهدف:
<div class="percent">العرض كنسبة مئوية</div>
شيفرة CSS:
.percent {
  width: 20%;
  border: 1px solid black;
}

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 3.0 4.0 4.0 1.0

البنية العامة

تقبل الخاصية width إحدى القيم الآتية:

<length>

تحديد العرض بالأطوال المطلقة.

<percentage>

تحديد العرض كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي.

auto

سيحسب المتصفح قيمة عرض العنصر تلقائيًا.

البنية الرسمية

width: auto | [ <length> | <percentage> ];

انظر أيضًا

  • صفحة الخاصية box-sizing التي تُستخدم لتعديل النموذج الصندوقي الافتراضي.
  • صفحة الخاصية height التي تُحدِّد ارتفاع العناصر.

مصادر ومواصفات