CSS Icons

CSS width in Hindi

by

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>
CSS width Example by Technalay

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>

Leave a comment