عرض مصدر CSS/Topics/Box Model

=== خصائص الصندوق ===
{| class="wikitable"
!الخاصية
!الوصف
|-
|<code>[[CSS/box-sizing|box-sizing]]</code>
|تُستخدم لتعديل النموذج الصندوقي الافتراضي في لغة CSS (أي CSS box model) المستخدم لحساب عرض وارتفاع العناصر.
|-
|<code>[[CSS/height|height]]</code>
|تُحدِّد ارتفاع أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد ارتفاع منطقة المحتوى، لكن إن كانت الخاصية <code>[[CSS/box-sizing|box-sizing]]</code> مضبوطة إلى <code>border-box</code> فستُحدِّد ارتفاع العنصر بدءًا من الحافة الخارجية للإطار.
|-
|<code>[[CSS/max-height|max-height]]</code>
|تضبط الارتفاع الأقصى للعنصر، وهي تمنع القيمة المستخدمة ([[CSS/used value|used value]]) للخاصية <code>[[CSS/height|height]]</code> من أن تتجاوز القيمة المُحدَّدة في الخاصية <code>max-height</code>.
|-
|<code>[[CSS/max-width|max-width]]</code>
|تضبط العرض الأقصى للعنصر، وهي تمنع القيمة المستخدمة ([[CSS/used value|used value]]) للخاصية <code>[[CSS/width|width]]</code> من أن تتجاوز القيمة المُحدَّدة في الخاصية <code>max-width</code>.
|-
|<code>[[CSS/min-height|min-height]]</code>
|تضبط الارتفاع الأدنى للعنصر، وهي تمنع القيمة المستخدمة ([[CSS/used value|used value]]) للخاصية <code>[[CSS/height|height]]</code> من أن تقل عن القيمة المُحدَّدة في الخاصية <code>min-height</code>.
|-
|<code>[[CSS/min-width|min-width]]</code>
|تضبط العرض الأدنى للعنصر، وهي تمنع القيمة المستخدمة ([[CSS/used value|used value]]) للخاصية <code>[[CSS/width|width]]</code> من أن تقل عن القيمة المُحدَّدة في الخاصية <code>min-width</code>.
|-
|<code>[[CSS/visibility|visibility]]</code>
|تسمح بإظهار أو إخفاء عنصر دون التأثير بتخطيط المستند، أي أنَّ المساحة ستُحجَز للعناصر سواءً كانت مرئيةً أو لا، ويمكن استخدام هذه الخاصية أيضًا لإخفاء أو إظهار الأعمدة في جدول <code>[[HTML/table|<nowiki><table></nowiki>]]</code>.
|-
|<code>[[CSS/width|width]]</code>
|تُحدِّد عرض أحد العناصر، وتستخدم هذه الخاصية افتراضيًا لتحديد عرض منطقة المحتوى (content area)، لكن إن كانت الخاصية <code>[[CSS/box-sizing|box-sizing]]</code> مضبوطة إلى <code>border-box</code>فستُحدِّد عرض العنصر بدءًا من الحافة الخارجية للإطار.
|}

=== الهوامش ===
{| class="wikitable"
!الخاصية
!الوصف
|-
|<code>[[CSS/margin|margin]]</code>
|الخاصية <code>margin</code> المختصرة في لغة CSS تضبط الهوامش في الأطراف الأربعة للعنصر، ويمكن استخدام هذه الخاصية بدلًا من ضبط الهوامش فرادى باستخدام <code>[[CSS/margin-top|margin-top]]</code> و <code>[[CSS/margin-right|margin-right]]</code> و<code>[[CSS/margin-bottom|margin-bottom]]</code> و <code>[[CSS/margin-left|margin-left]]</code>.
|-
|<code>[[CSS/margin-bottom|margin-bottom]]</code>
|تضبط الهامش في الطرف السفلي من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.
|-
|<code>[[CSS/margin-left|margin-left]]</code>
|تضبط الهامش في الطرف الأيسر من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.
|-
|<code>[[CSS/margin-right|margin-right]]</code>
|تضبط الهامش في الطرف الأيمن من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.
|-
|<code>[[CSS/margin-top|margin-top]]</code>
|تضبط الهامش في الطرف العلوي من العنصر، والقيم الموجبة ستؤدي إلى إبعاد العنصر عمّا جاوره، والقيم السالبة ستقربه منها.
|}

=== الحواشي ===
{| class="wikitable"
!الخاصية
!الوصف
|-
|<code>[[CSS/padding|padding]]</code>
|الخاصية <code>padding</code> المختصرة في لغة CSS تضبط الحاشية (padding) في الأطراف الأربعة للعنصر، ويمكن استخدام هذه الخاصية بدلًا من ضبط الحواشي فرادى باستخدام <code>[[CSS/padding-top|padding-top]]</code> و<code>[[CSS/padding-right|padding-right]]</code> و <code>[[CSS/padding-bottom|padding-bottom]]</code> و <code>[[CSS/padding-left|padding-left]]</code>.
|-
|<code>[[CSS/padding-bottom|padding-bottom]]</code>
|تضبط الحاشية (padding) في الطرف السفلي للعنصر؛ وعلى نقيض الهوامش <code>[[CSS/margin|margin]]</code>، لا يجوز استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة <code>[[CSS/padding|padding]]</code> لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة.
|-
|<code>[[CSS/padding-left|padding-left]]</code>
|تضبط الحاشية (padding) في الطرف الأيسر للعنصر؛ وعلى نقيض الهوامش <code>[[CSS/margin|margin]]</code>، لا يجوز استخدام استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة <code>[[CSS/padding|padding]]</code> لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة.
|-
|<code>[[CSS/padding-right|padding-right]]</code>
|تضبط الحاشية (padding) في الطرف الأيمن للعنصر؛ وعلى نقيض الهوامش <code>[[CSS/margin|margin]]</code>، لا يجوز استخدام استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة <code>[[CSS/padding|padding]]</code> لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة.
|-
|<code>[[CSS/padding-top|padding-top]]</code>
|تضبط الحاشية (padding) في الطرف العلوي للعنصر؛ وعلى نقيض الهوامش <code>[[CSS/margin|margin]]</code>، لا يجوز استخدام استخدام القيم السالبة للحواشي. ويمكن استخدام الخاصية المختصرة <code>[[CSS/padding|padding]]</code> لضبط جميع الحواشي على الأطراف الأربعة لأحد العناصر في قاعدة واحدة.
|}

=== اقتصاص المحتوى ===
{| class="wikitable"
!الخاصية
!الوصف
|-
|<code>[[CSS/overflow|overflow]]</code>
|تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي عند تجاوزه أبعاد الحاوية الكتلية التي هو فيها.
|-
|<code>[[CSS/overflow-x|overflow-x]]</code>
|تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي على يمينه أو يساره.
|-
|<code>[[CSS/overflow-y|overflow-y]]</code>
|تُحدِّد إن كان سيتم اقتصاص (clip) المحتوى، أو سيُعرَض شريط تمرير (scroll bar)، أو سيُعرَض ما يزيد من محتوى العنصر الكتلي فوقه أو تحته.
|}