पाठ 10, कुल 30 में

CSS ऊँचाई और चौड़ाई

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

CSS पैडिंग CSS बॉक्स मॉडल

हर element का एक आकार होता है। width तय करती है कि वह कितना चौड़ा है, height तय करती है कि वह कितना ऊँचा है। डिफ़ॉल्ट रूप से दोनों auto होते हैं — browser खुद तय करता है: block element अपने parent की चौड़ाई भरकर फैल जाता है, और उसकी ऊँचाई content के हिसाब से बढ़ती है।

Diagram — देखें, यह सब कैसे जुड़ता है

width और height से तय किया गया आकार डिफ़ॉल्ट रूप से content box पर लागू होता है। Padding और border उसके ऊपर जुड़ जाते हैं (जब तक आप box-sizing: border-box इस्तेमाल न करें, जिससे आप Box Model वाले पाठ में मिलेंगे)।

Units — आकार बताने के तरीके

px — pixels। Fixed और सटीक। width: 300px; हमेशा 300 pixel चौड़ा होता है।
% — parent element का प्रतिशत। width: 50%; का मतलब है parent से आधी चौड़ाई।
em — element के अपने font size के हिसाब से। अगर font 16px है, तो 2em है 32px।
rem — root (<html>) font size के हिसाब से, आमतौर पर 16px। 2rem पेज पर कहीं भी 32px है।
vw और vh — viewport (browser window) का प्रतिशत। width: 50vw; window की आधी चौड़ाई है; height: 100vh; window की पूरी ऊँचाई है।

Minimum और maximum आकार

कभी-कभी आप आकार को सीमा के साथ चाहते हैं। min-width और min-height तय करते हैं कि element कितना छोटा हो सकता है; max-width और max-height तय करते हैं कि वह कितना बड़ा हो सकता है। width: 80%; max-width: 600px; वाला card screen के साथ बढ़ता है पर 600px से ज़्यादा चौड़ा कभी नहीं होता। Images इस trick को बहुत इस्तेमाल करती हैं: max-width: 100%; बड़ी फोटो को छोटी फोन screen से बाहर निकलने से रोकता है।

सिंटैक्स — आकार काम करते हुए

.card {
  width: 320px;
  min-height: 120px;
}
.hero {
  width: 100%;
  height: 100vh;
}
img {
  max-width: 100%;
  height: auto;
}
.box {
  width: calc(100% - 40px);
}

Note: height: 100%; तभी काम करता है जब parent की ऊँचाई तय हो। Percentage वाली ऊँचाई ऊपर की ओर देखती है — अगर किसी parent की ऊँचाई नहीं है, तो browser उसे auto मान लेता है। इसीलिए height: 100vh; अक्सर आसान होता है: viewport की ऊँचाई हमेशा होती है।

Tip: Images के लिए सिर्फ width तय कीजिए और height को auto छोड़ दीजिए — browser फोटो के अनुपात को बनाए रखता है, इसलिए वह कभी खिंची हुई या दबी हुई नहीं दिखती।

calc() — CSS में गणित

calc() आपको units मिलाने देता है: width: calc(100% - 40px); का मतलब है "पूरी चौड़ाई घटा 40 pixel"। यह fixed sidebar के बगल वाले content area के लिए काम आता है। Spaces याद रखिए: calc(100%-40px) minus sign के आसपास spaces के बिना काम नहीं करता।

आम गलतियाँ

Text से भरे box पर pixel में fixed height तय करना — छोटी screen पर text बाहर निकल जाता है। इसके बजाय min-height इस्तेमाल करें, ताकि box बढ़ सके।
Padding के साथ width: 100% इस्तेमाल करना — padding ऊपर से जुड़ जाती है, इसलिए box अपने parent से बाहर निकल जाता है। box-sizing: border-box या calc() इस्तेमाल करें।
calc() के अंदर spaces भूल जाना — calc(100% - 40px) काम करता है, calc(100%-40px) नहीं।
ऐसे element पर height: 100% तय करना जिसके parent की ऊँचाई नहीं है — percentage के पास नापने के लिए कुछ नहीं होता।

याद रखें

width और height डिफ़ॉल्ट रूप से content box का आकार तय करते हैं।
px fixed है, % parent के हिसाब से है, rem root font size के हिसाब से है, vw/vh window के हिसाब से हैं।
max-width: 100% images को छोटी screens के अंदर रखता है।
Text वाले boxes के लिए min-height इस्तेमाल करें, ताकि वे बढ़ सकें।
calc() में + और - के आसपास spaces चाहिए।

उदाहरण समझिए

.profile { width: 320px; max-width: 90%; } — card बड़ी screen पर 320px चौड़ा है, पर छोटे फोन पर screen की 90% तक सिकुड़ जाता है, बाहर निकलने के बजाय।
.profile img { width: 100%; height: auto; } — फोटो card की पूरी चौड़ाई भरती है, और height: auto उसका आकार बनाए रखता है, इसलिए चेहरा कभी खिंचा हुआ नहीं दिखता।
.bar { width: 200px; } — बाहर वाला bar fixed 200px है, इसलिए अंदर वाला fill उसके मुकाबले percentage में नापा जा सकता है।
.fill { width: 75%; } — हरा fill 200px bar का 75% है, जिससे 75% attendance score बनता है।
.notice { width: calc(100% - 40px); margin: 20px; } — notice strip पूरी चौड़ाई घटा 40px लेती है, हर तरफ ठीक 20px margin छोड़कर।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Height and Width - Student Profile</title>
<style>
.profile { width: 320px; max-width: 90%; border: 2px solid #1e3a5f; padding: 16px; }
.profile img { width: 100%; height: auto; }
.bar { width: 200px; height: 16px; background: #e5e7eb; }
.fill { width: 75%; height: 16px; background: #16a34a; }
.notice { width: calc(100% - 40px); margin: 20px; background: #fef3c7; padding: 10px; }
</style>
</head>
<body>

<div class="profile">
<img src="photo.jpg" alt="Student photo">
<h2>Raj Kamal</h2>
<p>Computer Science, 3rd Semester</p>
<p>Attendance</p>
<div class="bar"><div class="fill"></div></div>
<p>75% present this semester</p>
</div>
<p class="notice">Classes resume on Monday after the holidays.</p>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।