شرح خواص الـ Width و Height فى CSS

---

سيتم شرح الخاصية width و height و min-width و max-width و min-height و max-height فى CSS بالتفصيل، مع بعض الأمثلة التوضيحية.

---

 

الخاصية width و height فى CSS

 

تحدد خاصية width و height عرض وارتفاع العنصر. بشكل افتراضي ، تحدد الخاصية عرض وارتفاع منطقة المحتوى.

 

مثال للتوضيح:

<style>
    .box {
        width: 100%;
        height: 100px;
        border: 2px solid black;
    }
</style>

<div class="box">Width & Height Example</div>

---

 

الخاصية min-height

 

تعيّن خاصية min-height الحد الأدنى لارتفاع العنصر.

يمنع القيمة المستخدمة لخاصية الـ height من أن تصبح أصغر من القيمة المحددة لـ min-height.

 

مثال للتوضيح:

<style>
    .box {
        min-height: 150px;
        border: 2px solid black;
    }
</style>

<div class="box">Example of min-height.</div>

---

 

الخاصية max-height

 

تعيّن خاصية mix-height الحد الأقصى لارتفاع العنصر.

يمنع القيمة المستخدمة لخاصية الـ height من أن تصبح أصغر من القيمة المحددة لـ max-height.

 

مثال للتوضيح:

<style>
    .box {
        min-height: 200px;
        max-height: 250px;
        border: 2px solid black;
    }
</style>

<div class="box">Example of max-height.</div>

---

 

الخاصية min-width

 

تعيّن خاصية min-width الحد الأدنى لعرض العنصر.

يمنع القيمة المستخدمة لخاصية الـ width من أن تصبح أصغر من القيمة المحددة لـ min-width.

 

مثال للتوضيح:

<style>
    .box {
        min-width: 100px;
        border: 2px solid black;
    }
</style>

<div class="box">Example of min-width.</div>

---

 

الخاصية max-width

 

تعيّن خاصية max-width الحد الأقصى لعرض العنصر.

يمنع القيمة المستخدمة لخاصية الـ width من أن تصبح أصغر من القيمة المحددة لـ max-width.

 

مثال للتوضيح:

<style>
    .box {
        min-width: 100px;
        max-width: 200px;
        border: 2px solid black;
    }
</style>

<div class="box">Example of max-width.</div>

---

 

قيم الخاصية width و height

 

قد تحتوي خصائص الارتفاع والعرض على القيم التالية:

• %: لتحديد الارتفاع أو العرض بالنسبة المئوية للعنصر.
• length: لتحديد الارتفاع أو العرض بالبكسل px أو cm.. إلخ.
• initial: يضبط الارتفاع أو العرض على قيمته الافتراضية.
• auto: (القيمة الإفتراضية) يقوم المستعرض بحساب الارتفاع والعرض الإفتراضى للعنصر.
• inherit: سيتم إحتساب الارتفاع أو العرض من قيمته الأصلية.

 

تنطبق هذه القيم على الخاصية و min-width و max-width و min-height و max-height أيضًا.