الدرس 31

عرض العنصر وارتفاعه باستخدام width و height

المعنى	Stand For	Name
عرض العنصر		width
ارتفاع العنصر		height
قيمة بيحددها المتصفح حسب العنصر والمحتوى والمساحة المتاحة		auto

العرض والارتفاع بيحددوا مساحة العنصر هنستخدم div علشان نجرب الأبعاد بشكل واضح

<div class="box">Width And Height</div>

.box {
  width: 300px;
  height: 150px;
  background-color: lightblue;
}

مساحة العنصر هنا عرضها 300 بكسل وارتفاعها 150 بكسل ومفيش padding أو border في المثال

.box {
  width: 300px;
  height: auto;
  background-color: lightblue;
}

استبدل المثال السابق بده وضيف كلام أطول هتلاقي الارتفاع بيزيد حسب عدد السطور بدل ما تفرض ارتفاع ثابت

<div class="parent">
  <div class="child">Half Of The Parent Width</div>
</div>

.parent {
  width: 400px;
  background-color: #eee;
}

.child {
  width: 50%;
  background-color: lightblue;
}

عرض الابن هنا 200 بكسل لأنه نصف عرض الأب في المثال لو عرض الأب بقى 300px الابن هيبقى 150px

في div عادية من غير تنسيقات خاصة ال width: auto بتخليها تستغل العرض المتاح داخل الأب

مع حساب المسافات والحدود مش معناها إن العرض يبقى قد الكلام بس

غير عرض الابن إلى 75% واحسب عرضه لما الأب يكون 400px

ثم اكتب نص طويل وقارن height: auto بارتفاع ثابت 40px

آخر تعديل للدرس: 13/10/2026