الحجم CSS (الحجم)

خصائص الحجم في CSS، تُستخدم للتحكم في الارتفاع والعرض للعناصر.

خصائص الحجم CSS

يقدم CSS عدة خصائص مثل width،height،max-width وmax-height وما إلى ذلك، تتيح لك تحديد حجم الصندوق. في الفصل التالي سيتم شرح كيفية استخدام هذه الخصائص لإنشاء تصميمات موقع أفضل.

خصائص العرض (Width) والارتفاع (Height)

تحدد خاصيات width وheight عرض وارتفاع منطقة المحتوى للعنصر. لا يشمل هذا الارتفاع الحشو، الحواف أو الهوامش. انظرنموذج الصندوق CSS 　 للتعرف على كيفية حساب الارتفاع والعرض الفعليين.

يمكن أن تأخذ خاصيات width وheight قيمًا طولية (مثل px، pt، em وما إلى ذلك)،النسبة المئويةأو الكلمة المفتاحية auto. لا يُسمح بالقيم السلبية.

div {
　　　　عرض: 300px;
　　　　height: 200px;
}

سيتم تخصيص 300 بكسل من العرض الثابت و200 بكسل من الارتفاع لـ<div>العنصر.

خصائص الارتفاع الأقصى

تسمح خاصية max-height لك بتحديد الارتفاع الأقصى للمحتوى في الصندوق. لا يشمل هذا الارتفاع الحشو، الحواف أو الهوامش.

حتى إذا تم ضبط خاصية height على قيمة أكبر، لن يزيد الارتفاع الفعلي للعنصر عن القيمة المحددة. على سبيل المثال، إذا تم ضبط height على 200px وmax-height على 100px، فإن الارتفاع الفعلي للعنصر سيكون 100px.

div {
　　　　height: 200px;
　　　　max-height: 100px;
}

تُستخدم خاصية max-height عادة مع خاصية min-height لتحديد نطاق الارتفاع للعنصر.

خصائص الارتفاع الأدنى

تسمح خاصية min-height لك بتحديد الارتفاع الأدنى للمحتوى في الصندوق. لا يشمل هذا الارتفاع الحشو، الحواف أو الهوامش.

العناصر التي تطبق خاصية min-height لن تكون أقل من الارتفاع الأدنى المحدد أبدًا. على سبيل المثال، إذا تم ضبط height على 200px وmin-height على 300px، فإن الارتفاع الفعلي للعنصر سيكون 300px.

div {
　　　　height: 200px;
　　　　min-height: 300px;
}

يستخدم عادة الخاصية min-height مع الخاصية max-height لتحديد نطاق الارتفاع للعنصر.

خاصية العرض الأقصى max-width

تسمح الخاصية max-width بتخصيص العرض الأقصى للمحتوى للكتلة. لا يشمل هذا العرض الأقصى الحشو، الحواف أو الهوامش.

حتى لو تم تعيين عرض أكبر للخاصية width، لن يكون العنصر الذي يتم تطبيق الخاصية a عليه أوسع من القيمة المحددة. على سبيل المثال، إذا تم تعيين عرض 300px، وتم تعيين max-width على 200px، فإن عرض العنصر الفعلي سيكون 200px.

div {
　　　　عرض: 300px;
　　　　عرض أقصى max-width: 200px;
}

يستخدم عادة الخاصية max-width مع الخاصية min-width لتحديد نطاق العرض للعنصر.

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

تسمح الخاصية min-width بتخصيص العرض الأدنى للمحتوى للكتلة. هذا العرض الأدنى لا يشمل الحشو، الحواف أو الهوامش.

العنصر الذي يتم تطبيق الخاصية min-width عليه لن يكون أضيق من العرض الأدنى المحدد أبداً. على سبيل المثال، إذا تم تعيين عرض 300px، وتم تعيين min-width على 400px، فإن عرض العنصر الفعلي سيكون 400px.

div {
　　　　عرض: 300px;
　　　　min-width: 400px;
}

يستخدم عادة الخاصية min-width مع الخاصية max-width لتحديد نطاق العرض للعنصر.