CSS3 box-sizing से लेआउट बनाएं

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    .container { width: 500px; border: 8px solid rgb(35, 0, 100); }
    .border {
      box-sizing: border-box; width: 100%; height: 100px;
      border: 4px solid rgb(4, 97, 54);
    }
    .content {
      width: 100%; height: 100px; padding: 50px;
      border: 4px solid rgb(255, 0, 191); box-sizing: content-box;
    }
  </style>
</head>
<body>
  <h1>Box sizing layout example</h1>
  <div class="container">
    <div class="border">This div has 100% width and box-sizing property set to border box</div>
    <br>
    <div class="content">This div also has 100% width but has the box-sizing property set to content box</div>
  </div>
</body>
</html>

आउटपुट

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

मुख्य बिंदु

• border-box - width = कंटेंट + पैडिंग + बॉर्डर (कुल 500px रहता है)
• content-box - width = केवल कंटेंट (पैडिंग/बॉर्डर अतिरिक्त, कुल > 500px)
• यूनिवर्सल रिसेट - * { box-sizing: border-box } अक्सर उपयोग होता है
• लेआउट सरलीकरण - border-box से चौड़ाई गणना सहज
• दृश्य अंतर - content-box डिव कंटेनर से बाहर निकलेगा