---
title: Height and Width Dimensions
localeTitle: أبعاد الطول والعرض
---
## أبعاد الطول والعرض

### فريف

يمكن للمبرمجين استخدام خصائص الارتفاع والعرض لتغيير ارتفاع وعناصر محددة. لكي يتم تغيير أبعادها ، يجب تعيين قيمة `display` الخاصة بهذه العناصر إلى `block` أو `block` `inline-block` .

### بناء الجملة

#### ارتفاع:

*   `height: auto|length|initial|inherit;`
*   `min-height: length|initial|inherit;`
*   `max-height: none|length|initial|inherit;`

#### عرض:

*   `width: auto|value|initial|inherit;`
*   `min-width: length|initial|inherit;`
*   `max-width: none|length|initial|inherit;`

### الاستخدام و الأمثلة

جميع الخصائص المذكورة أعلاه يمكن أن يكون لها قيمة **واحدة** فقط.

#### ارتفاع:

تحدد خاصية `height` الدقيق لعنصر. القيمة `auto` هي القيمة الافتراضية وتسمح للمتصفح بتعيين الارتفاع تلقائيًا. يتم تحديد ذلك عادةً عن طريق المساحة الرأسية التي يأخذها محتوى العنصر. يمكن ضبط طول الارتفاع ليصبح ثابتًا في `px` ، بالنسبة إلى ارتفاع أقرب عنصر رئيسي باستخدام وحدة `%` ، أو بالنسبة إلى ارتفاع إطار العرض باستخدام وحدة `vh` . سوف يكون للقيمة `initial` نفس التأثير للقيمة `auto` بينما تعطي قيمة `inherit` العنصر بنفس الارتفاع كعنصر رئيسي أقرب.

**مثال:**

 `
<p id="red">Example text</p> 
` 

 `p#red { 
    margin: 0; 
  background-color: red; 
  height: 50vh; 
    line-height: 50vh; 
    text-align:center; 
 } 
` 

**نتيجة:** ![مثال واحد](https://image.prntscr.com/image/dbKSQofTThGZRD7FJLyjJQ.png) يستخدم المثال أعلاه وحدة `vh` لإعداد الارتفاع. يتم استخدام هذه الوحدة لضبط ارتفاع العنصر بالنسبة لارتفاع إطار العرض. في هذه الحالة ، تُعطى الفقرة الحمراء ارتفاعًا يبلغ نصف ارتفاع إطار العرض حتى تستهلك 50٪ من الشاشة. _ملاحظة: يجب إزالة جميع الهوامش الافتراضية من النص لجعل النتيجة تظهر كما ينبغي._

تحدد الخاصية `min-height` الحد الأدنى للارتفاع الذي يجب أن يحتوي عليه العنصر. هذه الخاصية مفيدة عند تغيير حجم الصفحة بشكل رأسي ، حيث يمكن للمبرمج منع عنصر من التقلص أكثر من اللازم وعدم الظهور بشكل جيد. يتم تعيين القيمة الافتراضية للحد `min-height` لعنصر ما على 0. سيحظر رمز CSS أدناه الفقرة ذات `ID` **المثال** من التقلص إلى أقل من 400 بكسل في الارتفاع.

**مثال:**

 `p#example { 
  min-height: 400px; 
 } 
` 

تحدد الخاصية `max-height` أقصى ارتفاع يمكن أن يصل إليه العنصر. قد يكون ذلك مفيدًا عندما لا تريد أن يكون العنصر أكبر من حجم معين. إذا كان محتوى العنصر أعلى من قيمة `max-height` المحتوى.

**مثال:**

 `p { 
  max-height: 40px; 
  background-color: red; 
 } 
` 

**نتيجة:** ![مثال 3](https://image.prntscr.com/image/eRdqazdUSWO2rdVfcUb5rQ.png)

#### عرض:

تفسيرات خاصية عرض CSS هي نفسها تمامًا مثل خصائص الارتفاع "باستثناء أنها تغيّر عرض العنصر. لذلك ، سأعرض فقط بعض الأمثلة على استخدام هذه الخصائص أدناه.

**مثال:**

 `p { 
  width: 150px; 
  background-color: red; 
 } 
` 

**نتيجة:** ![مثال 4](https://image.prntscr.com/image/x1_khU6TQsmZQznt7YU9qw.png)

_ملاحظة: لا يمتد المحتوى إلى اليمين ، بل يستهلك العرض المحدد فقط ثم يكسر في السطر التالي._

**مثال:**

 `p { 
  min-width: 50px; 
 } 
` 

لن يسمح الكود السابق ببساطة لعنصر فقرة أن يتقلص أفقيًا إلى أقل من 50 بكسل.

**مثال:**

 `p { 
  max-width: 300px; 
  background-color: red; 
 } 
` 

لن يسمح الرمز أعلاه بعرض عنصر أكبر من 300 بكسل.

آمل أن تكون هذه المقالة قد ساعدت في إرضائك مع أبعاد ارتفاع وعرض CSS. أدرجت بعض الروابط أدناه ، إذا كنت ترغب في قراءة المزيد عن هذه الخصائص.

#### معلومات اكثر:

*   أبعاد ارتفاع وعرض CSS: https://www.w3schools.com/css/css\_dimension.asp
*   خاصية ارتفاع CSS: https://www.w3schools.com/cssref/pr _dim_ height.asp
*   خاصية عرض CSS: https://css-tricks.com/almanac/properties/w/width/
*   أطوال CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/length