CSS3 बॉक्स चौड़ाई box-sizing के साथ

box-sizing प्रॉपर्टी तत्व की चौड़ाई और ऊंचाई गणना बदलती है। content-box (डिफ़ॉल्ट) में पैडिंग/बॉर्डर चौड़ाई में जुड़ते हैं; border-box में शामिल होते हैं।

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    div { width: 200px; height: 200px; display: inline-block; }
    .contentBox { padding: 50px; border: 1px solid rgb(255, 0, 128); }
    .borderBox { box-sizing: border-box; padding: 50px; border: 1px solid rgb(194, 0, 194); }
  </style>
</head>
<body>
  <h1>Box sizing example using CSS</h1>
  <div class="contentBox"> This div doesn't have box sizing property that's why it looks bigger </div>
  <div class="borderBox"> This div has box sizing property </div>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

मुख्य बिंदु

• contentBox - 200px + 100px पैडिंग + 2px बॉर्डर = 302px कुल चौड़ाई
• borderBox - 200px कुल (पैडिंग/बॉर्डर अंदर), कंटेंट क्षेत्र छोटा
• दृश्य तुलना - content-box डिव बड़ा दिखाई देता है
• इनलाइन-ब्लॉक - दोनों साइड-बाय-साइड
• बेस्ट प्रैक्टिस - * { box-sizing: border-box } ग्लोबल रिसेट