الارتفاع والعرض في CSS

عرض هذا العنصر هو 100 في المئة.

يتم تعيين الارتفاع والعرض في CSS

height و width الخاصية تستخدم لضبط الارتفاع والعرض للعنصر.

لا تشمل الخاصية height و width الهوامش الداخلية والهوامش والحدود. إنها تضبط منطقة الهوامش الداخلية والحدود والهوامش داخل العنصر!

قيم الارتفاع والعرض في CSS

height و width يمكن لتلك الخاصية إعداد القيم التالية:

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

مثال على الارتفاع والعرض في CSS

ارتفاع هذا العنصر هو 200 بكسل، عرضه 50٪

مثال

ضبط الارتفاع والعرض للـ <div>:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

جربها بنفسك

ارتفاع هذا العنصر هو 100 بكسل، عرضه 500 بكسل.

مثال

ضبط الارتفاع والعرض للـ <div> الآخر:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

جربها بنفسك

ملاحظة:تذكر،height و width الخاصية لا تشمل الهوامش الداخلية والهوامش والحدود. إنها تضبط منطقة الهوامش الداخلية والحدود والهوامش داخل العنصر!

ضبط max-width

max-width الخاصية تستخدم لضبط أوسع العنصر الأقصى.

يمكن تحديد max-width (أوسع أقصى) باستخدام قيمة الطول (مثل px، cm وما إلى ذلك) أو النسبة المئوية للبلاك (％)، أو إعدادها على none (القيمة الافتراضية. تعني عدم وجود أوسع أقصى).

عندما يكون عرض نافذة المتصفح أقل من عرض العنصر (500 بكسل)، يحدث ذلك العنصر السابق <div> المشكلة. ثم، سيضيف المتصفح شريط التمرير الأفقي إلى الصفحة.

في هذه الحالة، استخدم max-width يمكن أن يحسن معالجة المتصفح للنوافذ الصغيرة.

نصيحة:أزل نافذة المتصفح إلى عرض أقل من 500 بكسل لرؤية الفرق بين div!

ارتفاع هذا العنصر هو 100 بكسل، أوسع ذو أقصى عرض 500 بكسل.

ارتفاع هذا العنصر هو 100 بكسل، أوسع ذو أقصى عرض 500 بكسل.

ملاحظة:max-width قيمة الخاصية ستعمل على تغطية width(العرض).

مثال

ارتفاع عنصر <div> هذا هو 100 بكسل، أوسع ذو أقصى عرض 500 بكسل:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

جربها بنفسك

مزيد من الأمثلة

ضبط الارتفاع والعرض للأعمدة
هذا المثال يوضح كيفية ضبط الارتفاع والعرض للأعمدة المختلفة.
استخدام النسبة المئوية لضبط الارتفاع والعرض للصورة
هذا المثال يوضح كيفية استخدام النسبة المئوية لضبط الارتفاع والعرض للصورة.
ضبط الأوسع والأصغر للاعتماد
هذا المثال يوضح كيفية استخدام قيم البكسل لضبط الأوسع والأصغر للاعتماد.
ضبط الارتفاع الأدنى والأقصى للعنصر.
هذا المثال يوضح كيفية استخدام قيم البكسل لضبط الارتفاع الأدنى والأقصى للعنصر.

ضبط خصائص الحجم CSS

خصائص وصف
height ضبط الارتفاع للعنصر.
max-height ضبط الارتفاع الأقصى للعنصر.
max-width ضبط العرض الأقصى للعنصر.
min-height ضبط الارتفاع الأدنى للعنصر.
min-width ضبط العرض الأدنى للعنصر.
width ضبط عرض العنصر.