CSS Height/Width

हर webpage पर elements (जैसे box, image, paragraph, div आदि) की कोई height (ऊँचाई) और width (चौड़ाई) होती है। CSS में हम इन्हें control कर सकते हैं ताकि layout बिल्कुल वैसा दिखे जैसा हम चाहते हैं। चलिए इसे आसान हिंदी और English mix भाषा में step-by-step समझते हैं

Height और Width क्या होती है?

Height किसी element की ऊँचाई है — यानि वो vertical space जो element लेता है। Width किसी element की चौड़ाई है — यानि horizontal space जो element लेता है। इन दोनों का use webpage पर box, image, div, paragraph आदि की size तय करने के लिए किया जाता है।

CSS Syntax

selector {
  height: value;
  width: value;
}

Example

div {
  height: 200px;
  width: 300px;
  background-color: lightblue;
}

यह div 200px ऊँचा और 300px चौड़ा box बना देगा।

CSS Height और Width के Units

Example – Fixed Size Box

.box {
  width: 300px;
  height: 150px;
  background: coral;
}

यह हमेशा 300×150 का box रहेगा, चाहे screen छोटी हो या बड़ी।

Example – Responsive Size Box

.box {
  width: 50%;
  height: 200px;
  background: lightgreen;
}

अब यह parent container की width का 50% लेगा। Responsive layouts में %, vw, और vh ज़्यादा उपयोगी हैं।

CSS Min-width, Max-width, Min-height, Max-height

कभी-कभी आप चाहते हैं कि element की height या width एक limit तक ही बढ़े या घटे। इसके लिए min और max properties use की जाती हैं

Example

div {
  min-width: 200px;
  max-width: 600px;
  height: 200px;
  background: lightcoral;
}

इससे div की width 200px से छोटी और 600px से बड़ी नहीं होगी।

Responsive Example (Auto Resize Box)

.container {
  width: 90%;
  max-width: 1000px;
  height: auto;
  background: #f5f5f5;
  margin: auto;
}

यह box हर screen पर responsive रहेगा — mobile, tablet या desktop किसी पर भी ठीक दिखेगा।

Height: auto और Width: auto

Example

div {
  width: auto;
  height: auto;
  background: lightyellow;
}

Example

अब div उतना ही space लेगा जितना content को ज़रूरत होगी।

Example — Responsive Image

img {
  width: 100%;
  height: auto;
}

इससे image हमेशा parent container के अंदर फिट रहेगी और proportion maintain रहेगा। यह responsive design के लिए सबसे ज़रूरी trick है।

Box-Sizing Property (Important Concept)

Default behavior में padding और border element की width/height में add हो जाते हैं। लेकिन आप इसे control कर सकते हैं box-sizing से

* {
  box-sizing: border-box;
}

अब padding और border width/height के अंदर ही count होंगे, और layout perfect रहेगा।

Example – Stylish Card

<style>
.card {
  width: 300px;
  min-height: 150px;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  margin: 20px auto;
  text-align: center;
}
</style>

<div class="card">
  <h2>My CSS Card</h2>
  <p>This is a fixed size box with padding and border-box property.</p>
</div>

यह एक neat और balanced card बनाएगा जो responsive और visually perfect दोनों होगा।

Height/Width में Common Mistakes

Quick Recap

Pro Tips

Final Thoughts

CSS Height और Width आपकी वेबसाइट की shape और structure तय करते हैं। अगर इन्हें smartly use किया जाए तो हर screen पर design perfect दिखता है। यह responsive web design की रीढ़ की हड्डी हैं।