CSS Box Model

CSS Box Model – CSS Box Model In Hindi

CSS

CSS Box ModelCSS 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 |

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 StyleWidth 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 |

  1. border-style
  2. border-width
  3. border-color
  4. border-radius
  5. border

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 |

Leave a Reply

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