Sunrise Computer Classes: How to Insert CSS Box in HTML (In Hindi)

CSS Box Model (In Hindi)

HTML Element एक Box होता हैं। प्रत्येक Element यानि Box की अपनी अलग-अलग Properties होती हैं। इन Properties को समझने के लिए CSS में Box Model की अवधारणा को बनाया गया हैं। और Web Designing में Box Model का अहम Role होता हैं।

HTML का प्रत्येक Element एक अलग Box होता हैं। यह Box Content, Padding, Border और Margin से मिलकर बनता हैं। इन्हे ही Element की Properties कहाँ जाता हैं। और प्रत्येक Element अपना अलग अस्तित्व रखता हैं। चाहे वह Body Element हो या फिर कोई छोटा से छोटा Formatting Element हो। प्रत्येक को बराबर माना जाता हैं।

Different Type of CSS Box Model Properties

CSS Box Model के अलग-अलग भाग हैं। जिनसे मिलकर एक CSS Box Model बनता हैं। इन्हे Element Properties भी कहते हैं।

Content

Box Model में Content वह हिस्सा होता हैं जिसे Element द्वारा Define किया जाता हैं। Content में Text, Media आदि शामिल होते हैं। यह Box Model के केंद्र में होता हैं। Box Model में Content एक Visible Part होता हैं। जो हमेशा Users को दिखाई देता हैं बशर्ते इसे Hide नही किया गया है।

Padding

Content के चारों तरफ खाली जगह को Padding कहां जाता हैं। Padding, Content के बाहर और Border के अंदर Show होती हैं। CSS द्वारा प्रत्येक Element के लिए Padding Declare कर सकते हैं। जिसके लिए CSS द्वारा निम्न Properties का प्रयोग किया जाता हैं।

Padding – इसे Padding की Shorthand Property भी कहते हैं। इसके द्वारा Element की Padding को Set किया जाता हैं।
Padding Top – इस Property द्वारा Element की Top Padding को Set किया जाता हैं।
Padding Right – इस Property द्वारा Element की Right Padding को Set किया जाता हैं।
Padding Bottom – इस Property द्वारा Element की Bottom Padding को Set किया जाता हैं।
Padding Left – इस Property द्वारा Element की Left Padding को Set किया जाता हैं।

Border

Element Content और Padding के चारों तरफ Border Declare की जाती हैं। Border, Padding के चारों तरफ एवं Margin से अंदर Show होती हैं। By Default, Border Hide रहती हैं। जिसे आप निम्न Properties द्वारा Set कर सकते हैं।

Border – इसके द्वारा सभी Border Style को एक साथ Set किया जाता हैं।
Border Top – इस Property द्वारा Element की Top Border को Set किया जाता हैं।
Border Right – इस Property द्वारा Element की Right Border को Set किया जाता हैं।
Border Bottom – इस Property द्वारा Element की Bottom Border को Set किया जाता हैं।
Border Left – इस Property द्वारा Element की Left Border को Set किया जाता हैं।

Margin

Browser Window के भीतर और Border के बाहर जो खाली जगह होती हैं, वह Margin कहलाता हैं। By Default सभी Elements के लिए Margin Set किया जाता हैं। जिसे आप निम्न Margin Properties द्वारा Change कर सकते हैं।

Margin – इसके द्वारा Margin को एक साथ Set किया जाता हैं।
Margin Top – इस Property द्वारा Element का Top Margin Set किया जाता हैं।
Margin Right – इस Property द्वारा Element का Right Margin Set किया जाता हैं।
Margin Bottom – इस Property द्वारा Element का Bottom Margin Set किया जाता हैं।
Margin Left – इस Property द्वारा Element का Left Margin Set किया जाता हैं।

Width and Height of Elements

किसी Element की Height और Width Declare करने के लिए CSS की Width और Height Property का प्रयोग किया जाता हैं। वास्तव में ये Height और Width केवल Content Area की होती हैं

किसी Element की Actual Width और Height Box Model के अन्य Element पर निर्भर करती हैं। किसी Element की Actual Width और Height का पता नीचे दिए गए Calculator की मदद से लगा सकते हैं।

Total Width = Element Width + Padding Right & Left + Border Right & Left + Margin Right & Left

Total Height = Element Height + Padding Top & Bottom + Border Top & Bottom + Margin Top & Bottom

<!DOCTYPE html>
<html>
<head>
<title>CSS Box Model Demo</title>
<style type=”text/css”>
div {
width: 300px; padding: 20px; border: 5px solid green; margin: 0;
}
</style>
<body>
<div>This div is 350px wide and 20px padding with 5px border. Below this div a Image of 350px wide.</div>
</body>
</html>

<<Prev || Next >>

For Any Doubt Clear on Telegram Discussion Group

Join Us On Social Media

For Any Query @8604799387