# Display और Box Sizing — सीएसएस

Source: https://www.geekswithgeeks.com/hi/css/css-display-boxsizing

> बॉक्स कैसे बहता है, और padding/border उसका आकार बढ़ाते हैं या नहीं — यह नियंत्रित करें।

## display के मान

`block` पूरी पंक्ति की चौड़ाई लेता है और स्टैक होता है। `inline` टेक्स्ट के साथ बहता है और width/height को अनदेखा करता है। `inline-block` इनलाइन बहता है पर width/height स्वीकारता है। `none` बॉक्स को पूरी तरह हटा देता है।

## व्यवहार में display

`display: none` एलिमेंट को लेआउट से हटा देता है — यह `visibility: hidden` से अलग है, जो जगह बनाए रखता है।

```css
.badge {
  display: inline-block;
  width: 60px;
  padding: 4px;
}

.hidden {
  display: none;
}
```

## box-sizing

डिफ़ॉल्ट रूप से (`content-box`), padding और border आपकी तय width में **जुड़ जाते हैं**। `box-sizing: border-box` width में padding और border को शामिल कर लेता है, ताकि बॉक्स वही आकार रहे जो आपने तय किया।

## यूनिवर्सल रीसेट

लगभग हर प्रोजेक्ट `* { box-sizing: border-box; }` से शुरू होता है — यह width/height का गणित हर जगह अनुमानित बनाता है।