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;
}