If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
CSS में width, min-width , max-width property की help से आप किसी element की width को define कर सकते हैं।
element{
width : 300px;
}element with 60px; width
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS width Example</title>
</head>
<body>
<p style="background-color; width : 100px;">element with 60px; width</p>
</body>
</html>CSS में width property की values कुछ इस प्रकार हैं।
auto : by default value है जिसे browser द्वारा apply किया जाता है।
% : आप percent में भी width define कर सकते हैं , जैसे 15%, 20%.
length : इसमें आप px / cm में width define कर सकते हैं , जैसे 15px , 20cm.
inherit : इस value से किसी element की width इसके parent element से determine की जाती हैं।
element with 150px; width
element with 5cm; width
element with 50%; width
element with auto width
element with initial width
element with inherit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS width Example</title>
</head>
<body>
<p style="background-color: violet; width : 150px;">element with 150px; width</p>
<p style="background-color: hotpink; width : 5cm;">element with 5cm; width</p>
<p style="background-color: darkblue; width : 50%;">element with 50%; width</p>
<p style="background-color: lightblue; width : auto;">element with auto width</p>
<p style="background-color: lightgreen; width : initial;">element with initial width</p>
<p style="background-color: gold; width : inherit;">element with inherit</p>
</body>
</html>इसके अलावा CSS हमें min-width और max-width properties भी provide कराता है , किनकी help से किसी element की width को define कर सकते हैं।
इस property की help से किसी element की minimum width specify की जाती है, फिर उस width से वो element छोटा हो ही नहीं सकता है।
element{
min-width : 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS min-width Example</title>
</head>
<body>
<p style="background-color: violet; min-width : 200px;">element with min-width</p>
</body>
</html>इसकी help से किसी element की maximum width specify की जाती है , फिर उस element के अंदर कितना ही content क्यों न हो element की width define की गयी maximum width से ज्यादा नहीं बढ़ेगी।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS max-width Example</title>
</head>
<body>
<div style="background-color: hotpink; max-width:200px;">
<p>element with max-width, so that we can test it properly</p>
</div>
</body>
</html>