ارتفاع وعرض CSS
يتم استخدام CSS heightوالخصائص widthلتعيين ارتفاع وعرض عنصر.
تُستخدم خاصية CSS max-widthلتعيين أقصى عرض لعنصر ما.
ضبط ارتفاع وعرض CSS
تُستخدم الخصائص وخصائصها لتعيين ارتفاع heightوعرض widthعنصر.
لا تتضمن خصائص الارتفاع والعرض المساحة المتروكة أو الحدود أو الهوامش. يقوم بتعيين ارتفاع / عرض المنطقة داخل المساحة المتروكة والحد والهامش الخاص بالعنصر.
قيم ارتفاع وعرض CSS
قد تحتوي الخصائص heightو الخصائص على القيم التالية:width
auto- هذا هو الافتراضي. المتصفح يحسب الارتفاع والعرضlength- يحدد الارتفاع / العرض بالبكسل والسنتيمتر وما إلى ذلك.%- يحدد الارتفاع / العرض بالنسبة المئوية للكتلة المحتويةinitial- يضبط الارتفاع / العرض على قيمته الافتراضيةinherit- سيتم توريث الارتفاع / العرض من قيمته الأصلية
أمثلة على ارتفاع وعرض CSS
مثال
عيّن ارتفاع وعرض عنصر <div>:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
مثال
عيّن ارتفاع وعرض عنصر <div> آخر:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
ملاحظة: تذكر أن الخصائص heightو and widthلا تتضمن مساحة متروكة أو حدودًا أو هوامش! قاموا بتعيين ارتفاع / عرض المنطقة داخل الحشو والحدود والهامش للعنصر!
ضبط أقصى عرض
تُستخدم max-widthالخاصية لتعيين الحد الأقصى لعرض العنصر.
يمكن max-widthتحديدها في قيم الطول ، مثل px ، و cm ، وما إلى ذلك ، أو بالنسبة المئوية (٪) من الكتلة المحتوية ، أو تعيينها على لا شيء (هذا هو الافتراضي. يعني أنه لا يوجد حد أقصى للعرض).
تحدث مشكلة ما <div>سبق عندما تكون نافذة المتصفح أصغر من عرض العنصر (500 بكسل). ثم يضيف المتصفح شريط تمرير أفقي إلى الصفحة.
سيؤدي استخدام max-widthبدلاً من ذلك ، في هذه الحالة ، إلى تحسين تعامل المتصفح مع النوافذ الصغيرة.
نصيحة: اسحب نافذة المتصفح إلى أصغر من 500 بكسل ، لترى الفرق بين قسمي div!
ملاحظة:width إذا كنت تستخدم الخاصية
والممتلكات على نفس العنصر لسبب ما
max-width، وكانت قيمة
widthالخاصية أكبر من
max-widthالخاصية ؛ max-widthسيتم استخدام الخاصية (
وسيتم
widthتجاهل الخاصية).
مثال
يبلغ ارتفاع عنصر <div> 100 بكسل وحد أقصى للعرض 500 بكسل:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}
جربها بنفسك - أمثلة
يوضح هذا المثال كيفية ضبط ارتفاع وعرض العناصر المختلفة.
يوضح هذا المثال كيفية تعيين ارتفاع الصورة وعرضها باستخدام قيمة النسبة المئوية.
يوضح هذا المثال كيفية تعيين الحد الأدنى للعرض والحد الأقصى للعرض لعنصر باستخدام قيمة البكسل.
يوضح هذا المثال كيفية تعيين أدنى ارتفاع وأقصى ارتفاع لعنصر باستخدام قيمة البكسل.
جميع خصائص أبعاد CSS
| Property | Description |
|---|---|
| height | Sets the height of an element |
| max-height | Sets the maximum height of an element |
| max-width | Sets the maximum width of an element |
| min-height | Sets the minimum height of an element |
| min-width | Sets the minimum width of an element |
| width | Sets the width of an element |