08 - CSS Margin and Padding

   Box Model:

Box model in CSS is a term  related to layout and design.

Box model consists of Margin, border, padding and content which wrap around Tags.

For Example: Below we have a paragraph tag. Paragraph content some text in it.

And suppose we want to put our paragraph content in 250 pixel width space.

margin  left and right 10 pixel each side = 10 x 2 = 20 pixel

padding  left and right 10 pixel each side = 10 x 2 = 20 pixel

border  left and right 5 pixel each side = 5 x 2 = 10 pixel

Total Width of the Content will be = 250 + 20 + 20 + 10 = 300 pixel

   We Understand this with below Box model diagram 

Margin:      Area outside the content, margin has no background color, it is completely
                   transparent.
Border:      It is a line around content area, border contents three properties: border style, width
                   in pixel and color
                   Ex: border: Solid 5px #000
Padding:    It is a area between border and content. Color of this area is affected by the
                   background area of content.
Content:    It is a area where text and images appear.

powered by multimediagyan ©