Display और Box Sizing

display के मान

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

व्यवहार में display

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

.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 का गणित हर जगह अनुमानित बनाता है।