113 lines
5.1 KiB
Markdown
113 lines
5.1 KiB
Markdown
---
|
||
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;
|
||
}
|
||
`
|
||
|
||
**نتيجة:**  يستخدم المثال أعلاه وحدة `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;
|
||
}
|
||
`
|
||
|
||
**نتيجة:** 
|
||
|
||
#### عرض:
|
||
|
||
تفسيرات خاصية عرض CSS هي نفسها تمامًا مثل خصائص الارتفاع "باستثناء أنها تغيّر عرض العنصر. لذلك ، سأعرض فقط بعض الأمثلة على استخدام هذه الخصائص أدناه.
|
||
|
||
**مثال:**
|
||
|
||
`p {
|
||
width: 150px;
|
||
background-color: red;
|
||
}
|
||
`
|
||
|
||
**نتيجة:** 
|
||
|
||
_ملاحظة: لا يمتد المحتوى إلى اليمين ، بل يستهلك العرض المحدد فقط ثم يكسر في السطر التالي._
|
||
|
||
**مثال:**
|
||
|
||
`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 |