HTML में किसी elements का width देने के लिए CSS के width property का use किया जाता है।
element{
width : 500px;
}<!DOCTYPE html>
<html>
<head>
<title>CSS width Example by Technalay</title>
</head>
<body>
<p style="background-color; width : 100px;">this paragrph element with 60px; width</p>
</body>
</html>CSS width values
- auto
- length
- %
- inherit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS width Example by Technalay</title>
</head>
<body>
<p style="background-color: violet; width : 150px;">This element with 150px; width</p>
<p style="background-color: hotpink; width : 5cm;">This element with 5cm; width</p>
<p style="background-color: darkblue; width : 50%;">This element with 50%; width</p>
<p style="background-color: lightblue; width : auto;">This element with auto width</p>
<p style="background-color: lightgreen; width : initial;">This element with initial width</p>
<p style="background-color: gold; width : inherit;">This element with inherit</p>
</body>
</html>This element with 150px; width
This element with 5cm; width
This element with 50%; width
This element with auto width
This element with initial width
This element with inherit
CSS min-width and max-width property
इसके मदद से भी किसी भी element के width को define किया जाता है जैसे ही आप एक बार width को define कर लेते है उस element का width change नहीं होता है।
आइये इसे एक एक करके समझने का प्रयास करते है :
CSS min-width property
इस property के मदद से किसी भी HTML element का minimum width define किया जाता है। इसको एक बार define करने के बाद उस element का width कम नहीं हो सकता है। इसके लिए min-width property का use किया जाता है।
element{
min-width : 100px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS min-width Example by Technalay</title>
</head>
<body>
<p style="background-color: violet; min-width : 200px;">CSS min-width Example by Technalay</p>
</body>
</html>CSS max-width property
इस property के मदद से किसी भी element का maximum width define किया जाता है। इसको एक बार define करने के बाद उस element के width को बढ़ाया नहीं जा सकता है। इसके लिए max-width property का use किया जाता है।
element{
max-width : 100px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS max-width Example by Technalay </title>
</head>
<body>
<div style="background-color: hotpink; max-width:200px;">
<p>इस property के मदद से किसी भी element का maximum width define किया जाता है।</p>
</div>
</body>
</html>