يعني الارتفاع. CSS - ارتفاع الصندوق بالنسبة إلى عرضه. ميزات حساب العرض والارتفاع

ال ارتفاعتحدد خاصية CSS ارتفاع العنصر. بشكل افتراضي ، تحدد الخاصية ارتفاع منطقة المحتوى. إذا تم تعيين حجم الصندوق على مربع الحدود ، فإنه يحدد بدلاً من ذلك ارتفاع منطقة الحد.

يتم تخزين مصدر هذا المثال التفاعلي في مستودع GitHub. إذا كنت ترغب في المساهمة في مشروع الأمثلة التفاعلية ، فيرجى استنساخ https://github.com/mdn/interactive-examples وإرسال طلب سحب إلينا.

تتجاوز خصائص min-height و max-height الارتفاع.

بناء الجملة

/ * قيمة الكلمة الرئيسية * / الارتفاع: تلقائي ؛ / * القيم * / الارتفاع: 120 بكسل ؛ الارتفاع: 10 م ؛ / * القيمة * / الارتفاع: 75٪ ؛ / * القيم العالمية * / الارتفاع: ترث ؛ الارتفاع: الأولي ؛ الارتفاع: غير محدد

قيم

يمثل نوع بيانات CSS قيمة المسافة. يمكن استخدام الأطوال في العديد من خصائص CSS ، مثل العرض والارتفاع والهامش والحشو وعرض الحدود وحجم الخط وظلال النص. "> يحدد الارتفاع كقيمة مطلقة. يمثل نوع بيانات CSS قيمة النسبة المئوية. غالبًا ما يتم استخدامه لتعريف الحجم بالنسبة إلى الكائن الأصل للعنصر. يمكن للعديد من الخصائص استخدام النسب المئوية مثل عرض ارتفاع هامش الحشو وحجم الخط.> يُعرّف الارتفاع كنسبة مئوية من ارتفاع الكتلة المحتوية. تلقائيًا سيقوم المستعرض بحساب وتحديد ارتفاع للعنصر المحدد. الحد الأقصى للمحتوى الارتفاع المفضل الجوهري. الحد الأدنى للمحتوى الحد الأدنى للارتفاع الجوهري. محتوى مناسب (بيانات CSS النوع يمثل قيمة يمكن أن تكون أ أو أ ."> ) يستخدم صيغة fit-content مع استبدال المساحة المتاحة بالوسيطة المحددة ، أي min (max-content، max (min-content،)).

النحو الرسمي

يمثل نوع بيانات CSS قيمة النسبة المئوية. غالبًا ما يتم استخدامه لتعريف الحجم بالنسبة إلى الكائن الأصل للعنصر. يمكن للعديد من الخصائص استخدام النسب المئوية مثل عرض ارتفاع هامش الحشو وحجم الخط.> مربع محتوى مربع الحدود المتاحة min-content max-content fit-content auto

مثال

لغة البرمجة

أنا بطول 50 بكسل.

طولي 25 بكسل.

أنا "نصف ارتفاع والدي.

CSS

div (العرض: 250 بكسل ؛ الهامش السفلي: 5 بكسل ؛ الحد: 2 بكسل أزرق ؛) # أطول (الارتفاع: 50 بكسل ؛) # أقصر (الارتفاع: 25 بكسل ؛) # الأب (الارتفاع: 100 بكسل ؛) # الطفل (الارتفاع: 50٪ ؛ العرض: 75٪ ؛)

نتيجة

مخاوف الوصول

تأكد من أن العناصر المعينة بارتفاع لا يتم اقتطاعها و / أو لا تحجب المحتوى الآخر عند تكبير الصفحة لزيادة حجم النص.

تحديد

تخصيص	حالة	تعليق
وحدة التحجيم الداخلية والخارجية CSS المستوى 4	مسودة المحرر
وحدة التحجيم الداخلية والخارجية من CSS المستوى 3 تعريف "الارتفاع" في تلك المواصفات.	مشروع العمل	تمت إضافة الكلمات الرئيسية ذات المحتوى الأقصى ، والمحتوى الأدنى ، والمحتوى المناسب.
انتقالات CSS تعريف "الارتفاع" في تلك المواصفات.	مشروع العمل	يسرد الارتفاع على أنه متحرك.
CSS المستوى 2 (المراجعة 1) تعريف "الارتفاع" في تلك المواصفات.	توصية	يضيف دعمًا لنوع بيانات CSS يمثل قيمة مسافة. يمكن استخدام الأطوال في العديد من خصائص CSS ، مثل العرض والارتفاع والهامش والحشو وعرض الحدود وحجم الخط وظلال النص. "> قيم وتحدد العنصر الذي تنطبق عليه.
CSS المستوى 1 تعريف "الارتفاع" في تلك المواصفات.	توصية	التعريف الأولي.

القيمة البدائية	تلقاءي
ينطبق على	كل العناصر ماعدا العناصر المضمنة غير المستبدلة وأعمدة الجدول ومجموعات الأعمدة
وارث	لا
النسب المئوية	يتم حساب النسبة المئوية فيما يتعلق بارتفاع المربع الذي تم إنشاؤه الذي يحتوي على كتلة. إذا لم يتم تحديد ارتفاع الكتلة المحتوية بشكل صريح (أي أنه يعتمد على ارتفاع المحتوى) ، ولم يتم تحديد موضع هذا العنصر بشكل مطلق ، فإن القيمة تحسب إلى auto. النسبة المئوية للارتفاع على عنصر الجذر تتعلق بالكتلة الأولية المحتوية.
وسائط	المرئية
القيمة المحسوبة	نسبة مئوية أو تلقائي أو الطول المطلق
نوع الرسوم المتحركة	يتم إقحام نوع بيانات CSS كأرقام حقيقية ذات فاصلة عائمة. "> الطول ، يتم إقحام نوع بيانات CSS كأرقام حقيقية ذات فاصلة عائمة."> النسبة المئوية أو الحساب () ؛
ترتيب قانوني	النظام الفريد غير الغامض الذي تحدده القواعد الرسمية

التوافق المتصفح

يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. إذا كنت ترغب في المساهمة في البيانات ، يرجى مراجعة https://github.com/mdn/browser-compat-data وإرسال طلب سحب إلينا.

تحديث بيانات التوافق على جيثب

	سطح المكتب						متحرك
	كروم	حافة	ثعلب النار	متصفح الانترنت	أوبرا	سفاري	عرض ويب Android	Chrome لنظام Android	Firefox لنظام Android	Opera لنظام Android	Safari على iOS	سامسونج إنترنت
ارتفاع	دعم Chrome الكامل 1	دعم الحافة الكاملة 12	دعم Firefox الكامل 1	دعم IE الكامل 4	دعم Opera الكامل 7	دعم Safari الكامل 1	دعم WebView Android الكامل 1	دعم Chrome Android الكامل 18	دعم Firefox Android الكامل 4	دعم Opera Android الكامل 10.1	دعم Safari iOS الكامل 1	دعم Samsung Internet Android الكامل 1.0
تناسب المحتوى	46- دعم الكروم الكامل	حافة لا يوجد دعم لا	فايرفوكس لا يوجد دعم لا	IE لا يوجد دعم لا	أوبرا دعم كامل 33	Safari الدعم الكامل 11 الدعم الكامل 11 الدعم الكامل 9 بادئة بادئة				أوبرا أندرويد؟	دعم Safari iOS الكامل 11 الدعم الكامل 11 الدعم الكامل 9 بادئة بادئة تم التنفيذ ببادئة البائع: -webkit-
ماكس المحتوى	46- دعم الكروم الكامل	حافة لا يوجد دعم لا	بادئة بادئة	IE لا يوجد دعم لا	أوبرا دعم كامل 44	دعم Safari الكامل 11	دعم WebView Android الكامل 46	دعم Chrome Android الكامل 46	بادئة بادئة تم التنفيذ ببادئة البائع: -moz-			دعم Samsung Internet Android الكامل 5.0
الحد الأدنى للمحتوى	46- دعم الكروم الكامل	حافة لا يوجد دعم لا	دعم Firefox الكامل 66 الدعم الكامل 66 الدعم الكامل 3 بادئة بادئة تم التنفيذ ببادئة البائع: -moz-	IE لا يوجد دعم لا	أوبرا دعم كامل 44	دعم Safari الكامل 11	دعم WebView Android الكامل 46	دعم Chrome Android الكامل 46	دعم Firefox Android الكامل 66 دعم كامل 66 دعم كامل 4 بادئة بادئة تم التنفيذ ببادئة البائع: -moz-	دعم Opera Android الكامل 43	Safari iOS الدعم الكامل 11	دعم Samsung Internet Android الكامل 5.0
تمتد	دعم كروم الكامل 28 يتوفر Webkit-fill-available"> الاسم البديل الدعم الكامل 28 يتوفر Webkit-fill-available"> الاسم البديل يتوفر Webkit-fill-available"> الاسم البديل	حافة لا يوجد دعم لا	فايرفوكس لا يوجد دعم لا	IE لا يوجد دعم لا	دعم Opera الكامل 15 يتوفر Webkit-fill-available"> الاسم البديل دعم كامل 15 يتوفر Webkit-fill-available"> الاسم البديل يتوفر Webkit-fill-available"> الاسم البديل يستخدم الاسم غير القياسي: -webkit-fill-available	دعم Safari الكامل 9 يتوفر Webkit-fill-available"> الاسم البديل الدعم الكامل 9 يتوفر Webkit-fill-available"> الاسم البديل يتوفر Webkit-fill-available"> الاسم البديل يستخدم الاسم غير القياسي: -webkit-fill-available	دعم WebView Android الكامل 4.4.2 يتوفر Webkit-fill-available"> الاسم البديل الدعم الكامل 4.4 يتوفر Webkit-fill-available"> الاسم البديل يتوفر Webkit-fill-available"> الاسم البديل يستخدم الاسم غير القياسي: -webkit-fill-available	دعم Chrome Android الكامل 28 يتوفر Webkit-fill-available"> الاسم البديل الدعم الكامل 28 يتوفر Webkit-fill-available"> الاسم البديل يتوفر Webkit-fill-available"> الاسم البديل يستخدم الاسم غير القياسي: -webkit-fill-available	Firefox Android لا يوجد دعم لا	أوبرا أندرويد؟	دعم Safari iOS الكامل 9 يتوفر Webkit-fill-available"> الاسم البديل الدعم الكامل 9 يتوفر Webkit-fill-available"> الاسم البديل يتوفر Webkit-fill-available"> الاسم البديل يستخدم الاسم غير القياسي: -webkit-fill-available	دعم Samsung Internet Android الكامل 5.0 يتوفر Webkit-fill-available"> الاسم البديل الدعم الكامل 5.0 يتوفر Webkit-fill-available"> الاسم البديل يتوفر Webkit-fill-available"> الاسم البديل يستخدم الاسم غير القياسي: -webkit-fill-available

أسطورة

دعم كاملدعم كامل لا دعملا دعم التوافق غير معروفالتوافق غير معروف يستخدم اسمًا غير قياسي. يستخدم اسمًا غير قياسي. يتطلب بادئة بائع أو اسمًا مختلفًا للاستخدام. يتطلب بادئة بائع أو اسمًا مختلفًا للاستخدام.

خصائص عرض css مسؤولة عن قيمة عرض منطقة المحتوى للعنصر.

العرض: القيمة | الفائدة | تلقائي | يرث

تعتبر خاصية css height مسؤولة عن قيمة ارتفاع منطقة المحتوى للعنصر.

الارتفاع: القيمة | الفائدة | تلقائي | يرث

غير مسموح بالقيم السلبية للارتفاع والعرض.

يبدو أن كل شيء بسيط وواضح مع خصائص CSS هذه ، ولكن في الواقع ، كل شيء يتبين أنه ليس بهذه البساطة.

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

أهم شيء يجب فهمه هو أن خصائص العرض والارتفاع تحدد عرض منطقة المحتوى وارتفاعها.

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

يمكن رؤية هذا بسهولة الآن.

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

العرض: 100 بكسل

العرض: 100 بكسل + حشوة

بشكل افتراضي ، يكون لصفحات الويب السلوك المتمثل في إضافة قيمة المساحة المتروكة للجانب المقابل إلى قيم الطول والعرض.

أولئك. سيتألف العرض الإجمالي للعنصر من قيمة خاصية عرض العنصر ، بالإضافة إلى قيمة padding-left و padding-right.

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

بالنسبة لأنواع العناصر المختلفة التي يمكن العثور عليها في صفحات الويب ، يمكن أن يكون لقيم العرض والارتفاع سلوكيات وقيم مختلفة.

سيكون الوضع مشابهًا مع خاصية الارتفاع.

الارتفاع: 100 بكسل

الارتفاع: 100 بكسل + حشوة

يحتوي CSS على خوارزمية خاصة تحسب قيم العرض والارتفاع لعناصر مختلفة على صفحة الويب. لن أسهب في الحديث عن هذه الخوارزمية الآن ، لأن إنه معقد إلى حد ما.

الآن الشيء الرئيسي الذي يجب أن نفهمه هو أن خصائص العرض والارتفاع تسمح لنا بالعمل مع عرض وارتفاع المنطقة مع محتوى العنصر ، وليس العرض والارتفاع الكلي للعنصر.

ارتفاع وعرض العنصرهي قيم محسوبة. يشكل كل عنصر في صفحة الويب منطقة مستطيلة ، والتي تتكون بدورها من عدة مناطق - منطقة المحتوى (المحتوى), مناطق الحشو, مناطق الإطارو المجالات الميدانيةعنصر.

بين محتوى العنصر وحدوده هي المسافة الفارغةالحشو خارج حدود العنصر - مجالاتهامش. كل عنصر له منطقة محتوى ، والمناطق الأخرى اختيارية.

أرز. 1. نموذج كتلة لعنصر

1. ارتفاع العنصر

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

بناء الجملة

P (الارتفاع: 100 بكسل ؛)

2. عرض البند

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

بناء الجملة

ف (العرض: 100 بكسل ؛)

3. ارتفاع وعرض عنصر محدد تمامًا

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

Div (الخلفية: # 6A7690 ؛ الموضع: مطلق ؛ أعلى: 0 ؛ أسفل: 0 ؛ يسار: 50٪ ؛ يمين: 0 ؛) / * في هذه الحالة ، ارتفاع العنصر هو 100٪ ، والعرض 50٪ من الكتلة الأصلية * /
أرز. 2. ارتفاع وعرض عنصر في وضع مطلق

4. المسافات البادئة للعنصر

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

إذا تم تقديم ثلاث قيم ، على سبيل المثال ، div (المساحة المتروكة: 10px 20px 30px؛) ، فسيتم توزيعها بالترتيب التالي: القيمة الأولى هي الحشوة العلوية ، والثانية هي الحشوة اليمنى واليسرى ، و الثالث هو الحشو السفلي.
إذا تم تقديم قيمتين ، على سبيل المثال ، div (المساحة المتروكة: 10 بكسل 20 بكسل ؛) ، فستقوم الأولى بتعيين الحشوة العلوية والسفلية ، وستقوم الثانية بتعيين الحشوة اليمنى واليسرى.
قيمة مفردة مثل div (المساحة المتروكة: 10 بكسل ؛) ستعيّن نفس المساحة المتروكة على جميع جوانب العنصر.

بناء الجملة

P (الحشو: 5 بكسل 10 بكسل 15 بكسل 10 بكسل ؛)

4.1 المسافة البادئة لأحد جوانب العنصر

لتعيين المساحة المتروكة على جانب واحد فقط من العنصر ، تحتاج إلى استخدام أحد خصائص padding-top و padding-right و padding-bottom و padding-left ، على سبيل المثال:

P (المساحة المتروكة: 10 بكسل ؛)

5. حقول العناصر

يتم فصل معظم العناصر عن بعضها بواسطة هوامش. خاصية margin هي صيغة مختصرة لكتابة هوامش عنصر بالترتيب التالي: أعلى ، يمين ، أسفل ، يسار... يتم استخدامه عندما تحتاج إلى تحديد هوامش من عدة جوانب ، ولكن ليس بالضرورة من أربعة جوانب. يتم طي الهوامش المتجاورة عموديًا لعناصر الكتلة ، وليس للهوامش العلوية والسفلية أي تأثير على العناصر المضمنة. مسموح بالقيم السلبية. الخاصية ليست موروثة.

إذا تم تقديم ثلاث قيم ، على سبيل المثال ، div (margin: 10px 20px 30px؛) ، فسيتم توزيعها بالترتيب التالي: القيمة الأولى هي الهامش العلوي ، والثانية هي الهامش الأيمن والأيسر ، والهامش الأيسر الثالث هو الهامش السفلي.
إذا تم تقديم قيمتين ، على سبيل المثال div (margin: 10px 20px؛) ، فإن الأول سيحدد الهامش العلوي والسفلي ، والثاني سيحدد اليمين واليسار.
قيمة واحدة مثل div (margin: 10px؛) ستحدد نفس الهوامش على كل جوانب العنصر.

(margin: 0 auto؛) سيعمل فقط إذا تم تعيين عرض العنصر بشكل صريح.

أرز. 3. الهامش: تلقائي ؛ لعنصر محدد تمامًا

بناء الجملة

Div (الهامش: 5px 10px 2px 5px؛)

5.1 الهوامش على جانب واحد من العنصر

تتحكم خصائص margin-top و margin-right و margin-bottom و margin-left في الهوامش المقابلة على كل جانب من جوانب العنصر ، على سبيل المثال:

ف (هامش اليسار: 10 بكسل ؛)

6. الحد من العرض والارتفاع

يدعم CSS أيضًا بعض الخصائص الأخرى المتعلقة بتعيين ارتفاع وعرض عناصر صفحة الويب: min-height و min-width و max-height و max-width. تسمح لك هذه الخصائص بتعيين القيم الدنيا والقصوى لعرض أو ارتفاع عنصر ما ، مما يمنح العنصر القدرة على ملء المساحة المتاحة. غالبًا ما تُستخدم الخصائص لتصميم صفحات الويب سريع الاستجابة. ينطبق على كل العناصر باستثناء العناصر المضمنة والجدول. إنهم دائمًا يتبعون القاعدة الرئيسية ، أي بعد إعطاء العنصر ارتفاعًا أو عرضًا. غير موروث.

يمكنك تحديد أبعاد عادية باستخدام بعض وحدات القياس ، وقيود الحجم باستخدام وحدات أخرى ، على سبيل المثال:

Div (العرض: 400 بكسل ؛ أقصى عرض: 50٪ ؛)

سيكون عرض العنصر 400 بكسل فقط إذا كانت هذه القيمة لا تتجاوز 50٪ من عرض كتلة الحاوية ، وإلا فسيتم تقليل عرضه.

آخر تحديث: 21.04.2016

يتم تعيين أبعاد العناصر باستخدام خصائص العرض والارتفاع.

القيمة الافتراضية لهذه الخصائص هي auto ، مما يعني أن المستعرض نفسه يحدد عرض العنصر وارتفاعه. يمكنك أيضًا تعيين الأبعاد بشكل صريح باستخدام الوحدات (وحدات البكسل ، em) أو باستخدام النسب المئوية:

العرض: 150 بكسل ؛ العرض: 75٪؛ الارتفاع: 15 م ؛

تحدد البكسل العرض والارتفاع بالضبط. تعتمد وحدة em على ارتفاع الخط في العنصر. إذا كان حجم خط عنصر ، على سبيل المثال ، هو 16 بكسل ، فإن 1 em لهذا العنصر سيكون 16 بكسل. بمعنى ، إذا تم ضبط عرض العنصر على 15em ، فسيكون في الواقع 15 * 16 = 230 بكسل. إذا لم يكن للعنصر حجم خط محدد ، فسيتم أخذه من المعلمات الموروثة أو القيم الافتراضية.

يتم حساب النسب المئوية لخاصية العرض بناءً على عرض عنصر الحاوية. إذا كان ، على سبيل المثال ، عنصر النص في صفحة ويب يبلغ عرضه 1000 بكسل والعنصر المتداخل الخاص به هو

بعرض 75٪ ، فإن العرض الفعلي لهذه الكتلة هو

1000 * 0.75 = 750 بكسل. إذا قام المستخدم بتغيير حجم نافذة المتصفح ، فسيتغير أيضًا عرض عنصر النص الأساسي ، وبالتالي ، عرض كتلة div المتداخلة.

تعمل قيم النسبة المئوية لخاصية الارتفاع بشكل مشابه لخاصية العرض ، باستثناء أنه يتم الآن حساب الارتفاع من ارتفاع عنصر الحاوية.

على سبيل المثال:

الأبعاد في CSS3

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

الأبعاد في CSS3

كما ترى في لقطة الشاشة ، في الواقع ، تحدد قيمة خاصية العرض - 200 بكسل - فقط عرض المحتوى الداخلي للعنصر ، وسيتم تخصيص مساحة تحت كتلة العنصر نفسه ، وعرضه يساوي عرض المحتوى الداخلي (خاصية العرض) + المساحة المتروكة (خاصية الحشو) + عرض الحد (خاصية عرض الحدود) + الحشو (خاصية الهامش). أي ، سيكون عرض العنصر 230 بكسل ، وسيكون عرض مربع العنصر ، مع مراعاة الهوامش ، 250 بكسل.

يجب أن تؤخذ هذه الحسابات في الاعتبار عند تحجيم العناصر.

باستخدام مجموعة إضافية من الخصائص ، يمكنك تعيين الحد الأدنى والحد الأقصى للأحجام:

العرض الأدنى: الحد الأدنى للعرض

أقصى عرض: أقصى عرض

الحد الأدنى للارتفاع: الحد الأدنى للارتفاع

أقصى ارتفاع: أقصى ارتفاع

العرض الأدنى: 200 بكسل ؛ العرض: 50٪؛ أقصى عرض: 300 بكسل ؛

في هذه الحالة ، يكون عرض العنصر هو 50٪ من عرض عنصر الحاوية ، لكن لا يمكن أن يكون أقل من 200 بكسل أو أكثر من 300 بكسل.

تجاوز عرض الكتلة

تتيح لك خاصية تغيير حجم الصندوق تجاوز حجم العناصر. يمكن أن يأخذ أحد القيم التالية:

content-box: قيمة الخاصية الافتراضية التي يضيفها المستعرض عرض الحدود والحشو إلى قيم خصائص العرض والارتفاع لتحديد العرض والارتفاع الفعليين للعناصر

padding-box: يخبر متصفح الويب أن عرض العنصر وارتفاعه يجب أن يشتملوا على حشوة كجزء من قيمتها. على سبيل المثال ، لنفترض أن لدينا النمط التالي:

العرض: 200 بكسل ؛ الارتفاع: 100 بكسل ؛ الهامش: 10 بكسل ؛ الحشو: 10 بكسل ؛ الحدود: 5px صلب #ccc ؛ لون الخلفية: #eee ؛ تحجيم الصندوق: صندوق حشو ؛

هنا سيكون العرض الفعلي للمحتوى الداخلي للكتلة 200 بكسل (عرض) - 10 بكسل (حشوة يسار) - 10 بكسل (حشوة لليمين) = 180 بكسل.

وتجدر الإشارة إلى أن معظم المتصفحات الحديثة لا تدعم هذه الخاصية.

مربع الحدود: يخبر متصفح الويب أن عرض العنصر وارتفاعه يجب أن يشتملوا على الحشو والحد كجزء من قيمتهما. على سبيل المثال ، لنفترض أن لدينا النمط التالي:

العرض: 200 بكسل ؛ الارتفاع: 100 بكسل ؛ الهامش: 10 بكسل ؛ الحشو: 10 بكسل ؛ الحدود: 5px صلب #ccc ؛ لون الخلفية: #eee ؛ تحجيم الصندوق: مربع الحدود ؛

هنا سيكون العرض الفعلي للمحتوى الداخلي للكتلة 200 بكسل (العرض) - 10 بكسل (المساحة اليسرى) - 10 بكسل (الحشوة اليمنى) - 5 بكسل (الحد الأيسر العرض) - 5 بكسل (الحد الأيمن العرض) = 170 بكسل.

على سبيل المثال ، دعنا نحدد مربعين يختلفان فقط في قيمة خاصية box-sizing:

الأبعاد في CSS3

تحديد الحجم الفعلي في CSS 3

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