CSS Max-width And Layout-Width In CSS In Hindi

CSS

CSS Max- width And Layout-Width In Hindi – Hamne Pichhle Topic CSS Display Me Dekha Tha Ki Ek Block Level Element Hmesha Full Width Leta Hai Jitni Available Hoti Hai, Par Agr Ham Chahe Ki Vo Element Ek Fix Width Hi Le, To Iske Liye Css-Layout-Width And CSS-Max-Width Ka Smjhna Bahut Jruri Hai |

Yadi Aapne  HTML Full Course  And CSS Full Course And Python Full Course And PHP Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai |

Layout-Width And Max-Width In CSS In Hindi

CSS width Property Ki Help Se Ham Kisi Bhi Block Level Element Ki Width Control Kar Skte Hai , Kyoki Block Level Full Width Cover Krte Hai |

Width In CSS In Hindi

Jaisa ki Upr Mention Kiya Gya Hai Ki Block Level Element Hamesha Screen Ki Full Width Cover Kr Lete Hai, To Is Problem Ko Solve Krne Ke Liye, Block Level Element Ke Container Ki Width Ko Control Krne Ke Liye width Property Ka Istemal Kiya Jata Hai , width Property Ki Help Se Ham Block Level Element Ki Width Ko Apne Anusar Set Kr Skte Hai |

Example : Do <div> Lete Hai Aur Unhe Different-Different width Dete Hai |

<!DOCTYPE html>
<html>
<head>
<html>
<head>
<style>
.a{
  width: 500px;
  border: 3px solid hotpink;
}

.b {
  width: 600px;
  border: 3px solid violet;
}
</style>

</head>
<body>

<h2>Master Programing CSS Max Width Tutorial</h2>
<div class="a">This content is from class a</div>
<br>
<div class="b">This content is from class b</div>

</body>
</html>

Output :

Max-Width In CSS In Hindi

max-width Property Set Krke Bhi Ham Block Lelevl Element Ki Width Control Kr Skte Hai , max-width Means Maximum Width |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.a {
  max-width: 500px;
  border: 3px solid hotpink;
}

.b {
  max-width: 600px;
  border: 3px solid violet;
}
</style>
</head>
<body>

<h2>Master Programing CSS Max-width Turorial</h2>

<div class="a">This content is from class a</div>
<br>
<div class="b">This content is from class b</div>

</body>
</html>

Output :

Margin : Auto In CSS In Hindi

Block Level Element Ke Container Ko Center Me Lane Ke Liye margin : auto; Property Ka Istemal Kiya Jata Hai , Div Container Center Me Lane Se Web Page Bahut Achha Dikhata Hai ,Isliye Is Property Ka Use Bahut Jyada Kiya Jata Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.a {
  width: 500px;
  margin: auto;
  border: 3px solid hotpink;
}

.b {
  max-width: 500px;
  margin: auto;
  border: 3px solid violet;
}
</style>
</head>
<body>

<h2>Master Programing CSS Max-width Tutorial</h2>

<div class="a">This div element has width: 500px;</div>
<br>

<div class="b">This div element has max-width: 500px;</div>

</body>
</html>

Output :

Upr Wale Example Me Hmne Do Div Liye Hai Aur Unhe Class a And Class b Di Hai, Ek Container Ko width : 500px; Aur Dusre Ko max-width : 500px ; Di Hai , Dono Div Ke Liye margin : auto; Set Kiya Gya Hai , Jisse Container Hme Screen Ke Center Me Dikhata Hai |

Ab Ham width Aur max-width Property Me Difference Smjhte Hai |

Upr Diye Gye Example Me Hme Dono Properties Se Same Result Mil Rha Hai But Esa Hmesha Nhi Hoga , Jb Screen width Jo Hmne Set Ki Hai Usse Km Hogi To Dono Properties Different-Different Result Show Kregi |

Example : Ab Hm Upr Diye Gye Example Me Hi Browser Screen Ko 500 px Se Km Krke Dekhte Hai |

To Hmne Dekha Ki width Wala div Pura Dikh Bhi Nhi Rha , Aur Uski Vajah Se Niche Horizontal Scroll Bar Show Ho Rha Hai, Aur max-width wala div Pura Dikh Rha Hai , Isliye max-width Use Krna Jyda Shi Rhta Hai |

Leave a Reply

Your email address will not be published. Required fields are marked *