box-sizing کنٹرول کرتا ہے کہ width اور height properties اصل میں کیا ماپتے ہیں۔ ڈیفالٹ (content-box) صرف content کو ماپتا ہے؛ انہیں padding اور border کو شامل کرتا ہے۔
box-sizing کنٹرول کرتا ہے کہ width اور height properties اصل میں کیا ماپتے ہیں۔ ڈیفالٹ (content-box) صرف content کو ماپتا ہے؛ انہیں padding اور border کو شامل کرتا ہے۔
border-box.box {
box-sizing: content-box; /* the default */
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px ← bigger than you asked for! */
content-box کے ساتھ، padding اور border width کے اوپر شامل ہوتے ہیں، تو element آپ کے سیٹ کیے گئے نمبر سے زیادہ چوڑا ہو جاتا ہے۔ یہ layouts کو توڑتا ہے: ایک width: 50% box padding کے ساتھ اپنے 50% سے overflow ہو جاتا ہے۔
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
border-box کے ساتھ، width حتمی rendered width ہے — padding اور border اندر سے منہا کیے جاتے ہیں۔ آپ جو نمبر سیٹ کرتے ہیں وہ سائز ہے جو آپ کو ملتا ہے، جو کہ بہت زیادہ intuitive ہے۔
*, *::before, *::after {
box-sizing: border-box;
}
تقریباً ہر جدید stylesheet، framework، اور reset یہ عام طور پر لاگو کرتے ہیں۔ یہ sizing کو predictable بناتا ہے: width: 50% + padding بالکل 50% چوڑا رہتا ہے، دو width: 50% boxes ایک دوسرے کے ساتھ بیٹھتے ہیں overflow کے بغیر، وغیرہ۔
border-box layout-math کے سب سے عام ذریعہ سے سر درد ہٹاتا ہے — ہر width میں padding اور border کو ذہنی طور پر شامل کرنا پڑتا ہے۔
اسے عام طور پر سیٹ کرنا ایک best-practice default سمجھا جاتا ہے، کیونکہ "جو width میں سیٹ کرتا ہوں وہ width مجھے ملتی ہے" یہ ہے کہ آپ قدرتی طور پر sizing کے کام کرنے کی توقع کرتے ہیں۔
تفصیلی جوابات کے ساتھ IT انٹرویو سوالات کی ایک لائبریری — جونیئر سے سینئر تک۔
عطیہ دیں