خواص الـ Width و Height فى CSS

سجين القدر

اخر تحديث :

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

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

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

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

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

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

Width & Height Example

تأكد من أن العناصر التي تم ضبطها بارتفاع أو عرض لا يتم اقتطاعها أو لا تحجب محتوى آخر عند تكبير الصفحة لزيادة حجم النص.

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

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

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

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

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

Example of min-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>

Example of max-height.

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

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

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

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

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

Example of min-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>

Example of max-width.

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

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

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

الأقسام CSS Tutorial