CSS Box Model – CSS Box Model In Hindi:- CSS Box Model Main Element Ki Width, Height, Border, Margin Or Padding Sabhi Ki Element Is Sabhi Ko Mila Kar Jitna Element Ki Height Or Width Banti Hai, Usi Ko Element Ka CSS Box Model Kaha Jata Hai |
Yadi Aapne HTML Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai | Kyoki Usme Milenge Aapko HTML Full Course A to Z |
Contents
CSS Box Model In Hindi
World Wide Web ki Duniya Main Mana Jata Hai Ki HTML Element Ek Box Hota Hai And Har Ek Element Yani Box Ki Aapni Alag-Alag Properties Hoti Hain. In Properties Ko Understand Ke Liye CSS Main Box Model Ko Banaya Gaya Hai Or Web Designing Main Box Model Ka Important Role Hota Hai |
Is Concept Ke Anushar HTML Ka Har Ek Element EK Rectangular Box Hota Hai Yah Box Us Element Ke Content, Padding, Border, Margin Se Bana Hota Hai | Aapko Upper Diya Gaya Diagram Main Is Box-model Ko Dikhata Hain |
Different Type of CSS Box Model Properties
Ham Ek Ek Karke Box Model Properties Ke Bare Main Understand Karte Hai |
Content in Box Model
Box Model main Content Vah Hissa Hota Hai Jise Element Duvara Define Kiya Jata Hai | Content Main Text, Media Etc Samil Hote Hain. Yah Box Model Ka Center Area Hota Hai |
Padding in Box Model
Box Model Main CSS Padding Se Element Ke Content Ke Liye Top, Right, Bottom, Or Left Side Ke Liye Padding Di Jati hai | Padding Ke Liye Negative Values Yani Ki Minus( – ) Main Values Istemal Yani Valid Nhi Hoti Hai |
Padding Property Ki Value Aap Length ( Cm, pt, px Etc ), Percentage % or inherit Duvara Set Kar Sakte Hai |
- padding-top Property
- padding-right Property
- padding-bottom Property
- padding-left Property
- padding Property
Padding Ke Bare Main Jyada Janne ke Liye Yaha Click Kare :- CSS Padding
Border in Box Model
CSS Mai Box Model Ko Border Di Jati hai Css Mai Border Ke Liye Style, Width Or Color Bhi Diya Jata Hai.
CSS Border Ko Aapni Like Ke Anushar Customize Karne Ke Liye Hame Types Of Css Border Properties Ki Jarurat Padti Hai | Css Border Ke Alag Alag Style Ke Liye Alag Alag Properties Available Hai |
Border Ke Bare Main Jyada Janne Ke Liye Yaha Click Kare:- CSS Border
Margin In Box Model
Margin Bhi CSS BOX Model Ka Ek Important Part Hai. Jiski Help Se Element Ke Charo Taraf Khali Jagah Yani Space Ko Define Kiya Jata Hai | Kisi Bhi Element Ka Margin Us Element Ki Webpage Main Position Ko Define Karta Hai |
Margin Ko CSS Main Alag-Alag Side Se Bhi Define Kar Sakte Hai Or Chahe To Ek Sath Bhi Define Kiya Ja Sakta Hai | CSS Margin Main Aap Auto-margin Ka Istemal Bhi Kar Sakte Hai |
- Margin-top Property
- Margin-right Property
- Margin-bottom Property
- Margin-left Property
Margin Ke Bare Main Jyada Janne Ke Liye Yaha Click Kare:- CSS Margin
Height in Box Model
Height Property Ka Istemal Element Ki Height Set Karne Ke Liye Kiya Jata Hai | Heigth-Property Ke Jariye Aap Element Ko Verticle Increase Kara Sakte Ho |
Element Ki Height Set Karne Ke Liye CSS Duvara Koi Height Properties Available Hoti hai Is Properties Ke Duvara Aap Element Ki Height Ko Control Kar Sakte Hai |
- max-height Property
- min-height Property
Height Ke Bare Main Jyada Janne Ke Liye Yaha Click Kare:- CSS Height
Width In Box Model
Width Property Ka Istemal Element Ki Width Set Karne Ke Liye Kiya Jata Hai | Width-Property Ke Jariye Aap Element Ko Horizontally Increase Kara Sakte Ho |
Element Ki Width Set Karne Ke Liye CSS Duvara Koi Width Properties Available Hoti hai Is Properties Ke Duvara Aap Element Ki Width Ko Control Kar Sakte Hai |
- width Property
- max-width Property
- min-width Property
Width Ke Bare Main Jyada Janne Ke Liye Yaha Click Kare:- CSS Width
Box Model Example CSS in Hindi
Ab Tak Hamne CSS BOX Model Ke Bare Main Thori Ko Read Kiya Lekin Ab Ham Uska Ek Example Dekhte Hain |
<html>
<head>
<style>
div {
width: 300px;
border: 15px solid red;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div>
<h1> How To Learn CSS Box Model </h1>
<p> You Can Learn Css Box Using HTML And Css Through MasterPrograming.com</p>
</div>
</body>
</html>
Aap Upper Diye Gaye Program Ko Run Karke Output Check Kar Sakte Hai |
Output:
Friends Mujhe Umeed Hai Ki Aapko CSS Box Model In Hindi Ke Bare Mai 100% Jankari Ho Gayi Hogi | Agar Aapko Learn Karne Main Dikkat Aa Rahi Hai To Aap Mere Se Contact Kar Sakte Hai |
