إعلان
تعلم الآن

CSS العرض و الطول

خصائص العرض و الطول

أي عنصر معروض كبلوك سواء block أو inline-block يمكن تحديد كم هو عرضه و طوله بالضبط في الصفحة.
من فوائد تحديد حجم العنصر أيضاً أنه يجعلك قادر على توسيطه في الصفحة.


خصائص الطول

فيما يلي الخصائص التي تستخدم لتحديد الطول:

  • height تستخدم لتحديد الطول الثابت للعنصر.
  • min-height تستخدم لتحديد أقل طول للعنصر.
  • max-height تستخدم لتحديد أقصى طول للعنصر.

خصائص العرض

فيما يلي الخصائص التي تستخدم لتحديد الطول:

  • width تستخدم لتحديد العرض الثابت للعنصر.
  • min-width تستخدم لتحديد أقل عرض للعنصر.
  • max-width تستخدم لتحديد أقصى عرض للعنصر.

قيم العرض و الطول

فيما يلي القيم التي يمكن وضعها لخصائص الطول و العرض:

  • auto لجعل المتصفح يحسب حجم العنصر بشكل تلقائي.
  • length نقصد بها وضع رقم بوحدة قياس محددة مثل px، pt، cm، % ليمثل الحجم.
  • initial لجعل العنصر يعود لحجمه الإفتراضي.
  • inherit لجعل العنصر يرث حجمه من العنصر الموجود فيه.

تحديد العرض و الطول

في المثال التالي قمنا بجعل عرض العنصر 50% و طوله 100 بكسل.

مثال

div {
    height: 100px;
    width: 50%;
    background-color: lightblue;
}
		
تجربة الكود

في المثال التالي قمنا بجعل عرض العنصر 100% و أبعدناه عن العناصر الموجودة تحته بواسطة الخاصية margin-bottom.

مثال

button {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}
		
تجربة الكود

في المثال التالي قمنا بجعل عرض الصورة الأقصى هو 500 بكسل و جعلنا عرضها الثابت 100%.
بهذا الأسلوب نحن نقصد أن حجم سيحاول الظهور بأكبر عرض ممكن و لكنه لن يزيد عن 500 بكسل و بالتالي في حال كان عرض الشاشة أقل من 500 بكسل فإنها ستظهر على كامل عرضها.

مثال

img {
    display: block;
    width: 100%;
    max-width: 500px;
}
		
تجربة الكود

الحجم و الحدود المائلة

عند تحديد حجم العناصر يمكنك ضمان ظهوره بشكل مربع، مستطيل أو دائرة.

في المثال التالي جعلنا الصورة تظهر بشكل دائري.

مثال

img {
    display: block;
    width: 200px;
    height: 200px;
    border: 3px solid gray;
    border-radius: 100%;
}
		
تجربة الكود

حساب الهامش و الحدود ضمن الحجم

إفتراضياً أي عنصر تضعه في الصفحة يعتمد أسلوب content-box في تحديد حجمه و هذا الأسلوب معناه أن طول و عرض العنصر لا يبالي بتاتاً بأي هامش داخلي padding أو حدود border موضوعة حوله.

كمثال عملي، إن قمت بجعل عرض العنصر 200 بكسل و أضفت له هامش داخلي من الجوانب بمقدار 20 بيكسل و أضفت له حدود بمقادر 5 بكسل فإنه سيظهر كالتالي.

عرض العنصر الكلي سيتم حسابه كالتالي: 200 بكسل + 20 بكسل هامش داخلي جهة اليمين + 20 بكسل هامش داخلي جهة اليسار + 5 بكسل حدود جهة اليمين + 5 بكسل حدود اليسار ليصبح إجمالي عرض العنصر 250 بكسل.


ملاحظة

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


حساب الحجم نسبةً للهامش و الحدود

لجعل العنصر يحسب الهامش الداخلي و الحدود كجزء من الحجم الذي نحدده له أضف الخاصية و القيمة box-sizing: border-box فقط.

بالعودة للمثال السابق لو جعلت العنصر يعتمد أسلوب border-box لتم جعل إجمالي عرض العنصر 200 بكسل و حجم محتواه سيصبح 150 بكسل كالتالي.

إذاً الخاصية box-sizing: border-box جعلت حجم العنصر بالضبط كما نريده و قامت بشكل تلقائي بتصغير المساحة المخصصة لمحتواه و المحافظة على مساحة الهامش و الحدود المحيطة به.


المثال التالي يوضح الفرق بين أسلوب content-box و border-box حيث أن العنصر الذي يعتمد على border-box لتحديد حجمه سيظهر بحجم أصغر لأن مساحة الهامش الدخلي و الحدود الموضوعة له تم حسابها ضمن مساحة حجمه.

مثال

div {
    width: 200px;
    padding: 20px;
    border: 5px solid gray;
}
            
.border-box {
    box-sizing: border-box;
}
		
تجربة الكود

ضبط أحجام العناصر على جميع المتصفحات

بعض العناصر التي تضيفها في الصفحة تظهر بشكل مختلف قليلاً من متصفح لآخر لأن المتصفحات تقوم بوضع هوامش سواء داخلية أو خارجية بمقدار مختلف عن بعضها البعض.

لضمان أن تكون الهوامش الداخلية و الخارجية حول العناصر تظهر بنفس الشكل تماماً مهما كان نوع المتصفح الذي يستعمله المستخدم فإننا نزيلها من جميع العناصر و من ثم نضيفها للعناصر التي نضيفها بالشكل الذي نريده. كذلك الأمر بالنسبة لأحجام العناصر، لكي نضمن أن الهوامش الداخلية و الحدود التي نضعها للعناصر سيتم حسابها مع حجمها فإننا نجعل جميع العناصر تستخدم أسلوب border-box.

فيما يلي الكود الذي يتم استخدامه في بداية أي تصميم حتى يتم إزالة الهوامش الإفتراضية منه و حساب الهوامش الداخلية و الحدود مع حجمه.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
    
  • margin: 0; تزيل أي هامش خارجي يعطيه المتصفح للوسم بشكل إفتراضي.
  • padding: 0; تزيل أي هامش داخلي يعطيه المتصفح للوسم بشكل إفتراضي.
  • box-sizing: border-box; لجعل الهامش الداخلي و الحدود يتم حسابهما مع طول و عرض العنصر.

في المثال التالي قمنا بإزالة الهوامش الإفتراضية لجميع العناصر و جعلناها تحسب الحدود و الهوامش الداخلية ضمن حجمها.

بعدها قمنا بإضافة هامش للعناصر التي وضعناها في الصفحة بالمقدار الذي نريده.

مثال

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
   
h2, p {
    padding: 10px 15px;
}
		
تجربة الكود
إعلان
دورة قواعد بيانات MySQL في هذه الدورة ستتعلم أساسيات قواعد البيانات و أوامر SQL، العلاقات (Join) بين الجداول، Normalization مع تطبيق مشروع متكامل. سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 600 ريال
تعلم الآن

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة