Components: Content, Padding, Border, Margin In Hindi
Components: Content, Padding, Border, Margin In Hindi
рдПрдЪрдЯреАрдПрдордПрд▓ рд╡реЗрдм рдкреЗрдЬ рдореЗрдВ┬ард╕реАрдПрд╕рдПрд╕┬ард╕реНрдХреНрд░рд┐рдкреНрдЯ рд╕реНрдЯрд╛рдЗрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╡реЗрдм рдкреЗрдЬ рдореЗрдВ рдЯреЗрдХреНрд╕реНрдЯ рдФрд░ рдЕрдиреНрдп рдкреЗрдЬ рдПрд▓рд┐рдореЗрдВрдЯ рдХреЛ рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рдореЗрдВ рдЗрдиреНрд╕рд░реНрдЯ рдФрд░ рдореИрдиреЗрдЬ рдХрд░ рд╕рдХрддреЗ рд╣реИ. рд╕рд╛рдорд╛рдиреНрдпрддрд╛, рд╕реАрдПрд╕рдПрд╕ рд╕реНрдХреНрд░рд┐рдкреНрдЯрд┐рдВрдЧ рд╕реНрдЯрд╛рдЗрд▓рд┐рдВрдЧ рдореЗрдВ рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рдореЗрдВ 4 рдореБрдЦреНрдп рдХрдореНрдкреЛрдиреЗрдВрдЯ рд╣реЛрддреЗ рд╣реИ. рдЬреИрд╕реЗ, рд╡реЗрдм рдкреЗрдЬ рдХрдВрдЯреЗрдВрдЯ, рдмреЙрдХреНрд╕ рдкреИрдбрд┐рдВрдЧ, рдмреЙрдХреНрд╕ рдмреЙрд░реНрдбрд░, рдФрд░ рдмреЙрдХреНрд╕ рдорд╛рд░реНрдЬрд┐рди, рдРрдЯреНрд░рд┐рдмреНрдпреВрдЯреНрд╕ рдЖрджрд┐ рд╣реИ. рдЬрд╣рд╛ рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рд╕реАрдПрд╕рдПрд╕ рдРрдЯреНрд░рд┐рдмреНрдпреВрдЯреНрд╕ рдХреЛ рдПрдЪрдЯреАрдПрдордПрд▓ рд╡реЗрдм рдбреЗрд╡рд▓рдкрд░ рд╕реАрдПрд╕рдПрд╕ рдЗрдлреЗрдХреНрдЯрд┐рд╡ рдФрд░ рд░реЗрд╕реНрдкреЙрдиреНрд╕рд┐рд╡ рд╡реЗрдм рдбреЗрд╡рд▓рдкрдореЗрдВрдЯ рдХреЗ рд▓рд┐рдП рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рдХрдореНрдкреЛрдиреЗрдВрдЯ рдХреЛ рдПрдЪрдЯреАрдПрдордПрд▓ рд╡реЗрдм рдкреЗрдЬ рдбреЗрд╡рд▓рдкрдореЗрдВрдЯ рдореЗрдВ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИред
So, letтАЩs know the box model and its components in HTML web page.
Box model content attributes.
рд╡реЗрдм рдбреЗрд╡рд▓рдкрдореЗрдВрдЯ рдореЗрдВ рдХрд┐рд╕реА рдкрд░реНрдЯрд┐рдХреБрд▓рд░ рдПрдЪрдЯреАрдПрдордПрд▓ рд╡реЗрдм рдкреЗрдЬ рдПрд▓рд┐рдореЗрдВрдЯ рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рдбрд┐рдЬрд┐рдЯрд▓ рдХрдВрдЯреЗрдВрдЯ рдпрд╛ рдСрдмреНрдЬреЗрдХреНрдЯ рдХреЗ рд▓рд┐рдП рдПрдХ рд░рд┐рдЬрд░реНрд╡реНрдб рдкреНрд▓реЗрд╕ рд╣реИ. рдЬрд┐рд╕рдореЗ рдореМрдЬреВрджрд╛ рд╡реЗрдм рдкреЗрдЬ рдореЗрдВ рдбрд┐рд╕реНрдкреНрд▓реЗ рдПрдЪрдЯреАрдПрдордПрд▓ рд╡реЗрдм рдкреЗрдЬ рдПрд▓рд┐рдореЗрдВрдЯ рдбрд┐рдЬрд┐рдЯрд▓ рдХрдВрдЯреЗрдВрдЯ, рдЗрдореЗрдЬреЗрдЬ, рдорд▓реНрдЯреАрдореАрдбрд┐рдпрд╛ рдСрдмреНрдЬреЗрдХреНрдЯ, рдХреЛ рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рдЕрдкрдиреЗ рдЕрдВрджрд░ рд╕рдорд╛рд╣рд┐рдд рдХрд░ рдкреНрд░реАрд╡реНрдпреВ рдХрд░рддрд╛ рд╣реИред
Box model content example in basic CSS.
┬а┬а┬а┬а┬а┬а┬а┬а┬а┬а┬а width: 200px;
┬а┬а┬а┬а┬а┬а┬а┬а┬а┬а┬а height: 200px;
┬а┬а┬а┬а┬а┬а┬а┬а┬а┬а┬а padding: 40px;┬а┬а┬а┬а┬а┬а┬а┬а /* it set space among content and border┬а */
┬а┬а┬а┬а┬а┬а┬а┬а┬а┬а┬а border: 4px solid lime; /* display border around the box */
┬а┬а┬а┬а┬а┬а┬а┬а┬а┬а┬а margin: 40px;┬а┬а┬а┬а┬а┬а┬а┬а┬а /* display space outside the box */
┬а┬а┬а┬а┬а┬а┬а┬а┬а┬а┬а background-color: aqua; /* display box model background color */
рдПрдЪрдЯреАрдПрдордПрд▓ рд╡реЗрдм рдкреЗрдЬ рдореЗрдВ рд╕реАрдПрд╕рдПрд╕ рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рдкреИрдбрд┐рдВрдЧ рдмреЙрдХреНрд╕ рдХрдВрдЯреЗрдВрдЯ рдЗрдирдлрд╛рд░реНрдореЗрд╢рди рдФрд░ рдмреЙрдХреНрд╕ рдмреЙрд░реНрдбрд░ рдХреЗ рдордзреНрдп рдкреИрдбрд┐рдВрдЧ рдореЗрдВ рдкреНрд░реАрд╡реНрдпреВ рд╣реЛрдиреЗ рд╡рд╛рд▓реА рдПрдореНрдкреНрдЯреА рд╕реНрдкреЗрд╕ рд╣реИред рдЬрд╣рд╛ рдпрд╣ рдореМрдЬреВрджрд╛ рд╕реАрдПрд╕рдПрд╕ рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рдореЗрдВ рдкреНрд░реАрд╡реНрдпреВ рдХрдВрдЯреЗрдВрдЯ рдХреЗ рдЪрд╛рд░реЛ рддрд░рдл рдкреИрдбрд┐рдВрдЧ рд╕реНрдкреЗрд╕ рдХреЛ рдХреНрд░рд┐рдПрдЯ рдХрд░рддрд╛ рд╣реИ рдЬрд┐рд╕рд╕реЗ рдХреА рд╡реЗрдм рдкреЗрдЬ рдЯреЗрдХреНрд╕реНрдЯ рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рдмреЙрд░реНрдбрд░ рд╕реЗ рдбрд┐рдлрд░реЗрдВрдЯ рдФрд░ рдЕрд▓рдЧ рдкреНрд░реАрд╡реНрдпреВ рд╣реЛрддрд╛ рд╣реИред
Box padding model example in basic CSS.
рдкреИрдбрд┐рдВрдЧ рдбрд╛рдпрдореЗрдВрд╢рди рд╡реЗрдм рдкреЗрдЬ рдореЗрдВ рдбрд┐рд╕реНрдкреНрд▓реЗ рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рдкреИрдбрд┐рдВрдЧ рд╕реАрдПрд╕рдПрд╕ рдРрдЯреНрд░рд┐рдмреНрдпреВрдЯреНрд╕ рд╡реЗрдм рдкреЗрдЬ рдореЗрдВ рдкреНрд░реАрд╡реНрдпреВ рдбрд┐рдЬрд┐рдЯрд▓ рдХрдВрдЯреЗрдВрдЯ рдХреЛ рдЯреЙрдк, рдмреЙрдЯрдо, рд▓реЗрдлреНрдЯ, рд░рд╛рдЗрдЯ, рд╕реЗ рдкреИрдбрд┐рдВрдЧ рд╕реНрдкреЗрд╕ рдХреЛ рдПрдбрдЬрд╕реНрдЯ рдХрд░ рдкреНрд░реАрд╡реНрдпреВ рдХрд░рддрд╛┬а рд╣реИред
Box model padding example in basic CSS.
┬а┬а┬а┬а┬а┬а┬а┬а padding: 40px;┬а┬а┬а┬а┬а┬а┬а┬а /* it set space among content and border┬а */
рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рдореЗрдВ рдЪрд╛рд░реЛ рд╕рд╛рдЗрдб рдХреЗ рдкреИрдбрд┐рдВрдЧ рд╕реНрдкреЗрд╕ рдХреЗ рд▓рд┐рдП рдореИрдиреНрдпреБрдЕрд▓ рдкреИрдбрд┐рдВрдЧ рдРрдЯреНрд░рд┐рдмреНрдпреВрдЯреНрд╕ рдХреЛ рдбрд┐рд╕реНрдкреНрд▓реЗ рдХрд░ рд╕рдХрддреЗ рд╣реИ.
┬а┬а┬а┬а┬а┬а┬а┬а padding: 12px 22px 20px 10px;┬а┬а┬а /* it set space among content and border from left, right, top, and bottom */
Box model border attributes.
рдбрд┐рдЬрд╝рд╛рдЗрди рдПрдЪрдЯреАрдПрдордПрд▓ рд╡реЗрдм рдкреЗрдЬ рдореЗрдВ рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рдмреЙрд░реНрдбрд░ рдкреИрдбрд┐рдВрдЧ рдФрд░ рд╡реЗрдм рдкреЗрдЬ рдХрдВрдЯреЗрдВрдЯ рд╕реНрдкреЗрд╕ рдХреЛ рдЪрд╛рд░реЛ рддрд░рдл рд╕реЗ рд╕рд░реНрд░рд╛рдЙрдВрдб рдХрд░рддрд╛ рд╣реИред рдЬрд╣рд╛ рдЖрдк рдореМрдЬреВрджрд╛ рд╡реЗрдм рдкреЗрдЬ рдмреЙрдХреНрд╕ рдХреА рд╡рд┐рдбреНрде, рдХрд▓рд░ рдФрд░┬ард╕реАрдПрд╕рдПрд╕┬ард╕реНрдЯрд╛рдЗрд▓ рдореЗрдВ рд╕реЙрд▓рд┐рдб рдмреЙрд░реНрдбрд░, рдбреЗрд╢ рдмреЙрд░реНрдбрд░, рдбреЗрд╢ рдбреЙрдЯреЗрдб рдмреЙрд░реНрдбрд░, рдЖрджрд┐ рдлреЙрд░реНрдордЯ рдореЗрдВ рдмреЙрдХреНрд╕ рдмреЙрд░реНрдбрд░ рдПрдЯреНрд░рд┐рдмреНрдпреВрдЯ рдФрд░ рд╕реНрдЯрд╛рдЗрд▓ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ.
рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рдмреЙрд░реНрдбрд░ рдбрд╛рдпрдореЗрдВрд╢рди рд╕реЗ рдЖрдк рдореМрдЬреВрджрд╛ рдХрдВрдЯреЗрдВрдЯ рдХреЗ рд░реВрдк рдореЗрдВ рдмреЙрд░реНрдбрд░, рдмреЙрд░реНрдбрд░-рд╡рд┐рдбреНрде, рдмреЙрд░реНрдбрд░-рд╕реНрдЯрд╛рдЗрд▓ рдФрд░ рдмреЙрд░реНрдбрд░-рдХрд▓рд░ рдЖрджрд┐ рдРрдЯреНрд░рд┐рдмреНрдпреВрдЯреНрд╕ рдХреЛ рдореИрдиреЗрдЬ рдФрд░ рдХрдгреНрдЯреНрд░реЛрд▓ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред
Box model border example in basic CSS.
┬а┬а┬а┬а┬а┬а┬а┬а border: 4px solid lime; /* display border around the box */
Box model margin attributes.
рдореМрдЬреВрджрд╛ рдПрдЪрдЯреАрдПрдордПрд▓ рд╡реЗрдм рдкреЗрдЬ рдореЗрдВ рдорд╛рд░реНрдЬрд┐рди рдЯреЗрдХреНрд╕реНрдЯ рдПрд▓рд┐рдореЗрдВрдЯ рдХреА рд▓реЛрдХреЗрд╢рди рд╕реАрдорд╛ рдХреЗ рдмрд╛рд╣рд░ рд╕реНрдкреЗрд╕ рд╣реИред рдпрд╣ рдПрдЪрдЯреАрдПрдордПрд▓ рд╡реЗрдм рдкреЗрдЬ рдПрд▓рд┐рдореЗрдВрдЯ рдХреЗ рдмреАрдЪ рд╕реЗрдкрд░рд╢рди рдХреЛ рдкреНрд░реАрд╡реНрдпреВ рдХрд░рддрд╛ рд╣реИ, рдЬрд┐рд╕рд╕реЗ рд╡реЗрдм рдкреЗрдЬ рд▓реЗрдЖрдЙрдЯ рдореЗрдВ рдЯреЗрдХреНрд╕реНрдЯ рд╕реНрдкреЗрд╕рд┐рдВрдЧ рдХреЛ рдХрдгреНрдЯреНрд░реЛрд▓ рдФрд░ рдЖрд╕рд╛рдиреА рд╕реЗ рдореИрдиреЗрдЬ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред
рдмреЙрдХреНрд╕ рдорд╛рд░реНрдЬрд┐рди рдбрд╛рдпрдореЗрдВрд╢рди рдРрдЯреНрд░рд┐рдмреНрдпреВрдЯреНрд╕ рдореЗрдВ рд╡реЗрдм рдкреЗрдЬ рдСрдмреНрдЬреЗрдХреНрдЯ рдорд╛рд░реНрдЬрд┐рди рдкреНрд░реЙрдкрд░реНрдЯреАрдЬ рджреНрд╡рд╛рд░рд╛ рдХрдгреНрдЯреНрд░реЛрд▓ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдпрд╣рд╛рдБ рдпрд╣ рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рдХреЗ рдЪрд╛рд░реЛ рддрд░рдл рдорд╛рд░реНрдЬрд┐рди рд╕реНрдкреЗрд╕ рдХреЗ рд╕рд╛рде рдкреНрд░реАрд╡реНрдпреВ рдХрд░рддрд╛ рд╣реИред
Box model margin example in basic CSS.
┬а┬а┬а┬а┬а┬а┬а┬а margin: 40px;┬а┬а┬а┬а┬а┬а┬а┬а┬а /* display space outside the box */
рдПрдЪрдЯреАрдПрдордПрд▓ рд╡реЗрдм рдбреЗрд╡рд▓рдкрд░ рдЕрдкрдиреА рд╡реЗрдм рдкреЗрдЬ рдмреЙрдХреНрд╕ рдореЙрдбрд▓ рдорд╛рд░реНрдЬрд┐рди рдЬрд░реВрд░рдд рдХреЗ рдЕрдиреБрд╕рд╛рд░ рдЪрд╛рд░реЛ рддрд░рдл рд╕реЗ рдЕрд▓рдЧ рдЕрд▓рдЧ рдорд╛рд░реНрдЬрд┐рди рдПрдбрдЬрд╕реНрдЯ рдФрд░ рдбрд┐рд╕реНрдкреНрд▓реЗ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ.
┬а┬а┬а┬а┬а┬а┬а margin: 10px 14px 19px 24px;┬а┬а┬а┬а┬а┬а┬а┬а /* display space outside the box */
Continue Reading On тАФ https://vcanhelpsu.com