Understanding the Box Model

To a browser, any tag is a box with something inside it—text, an image,or even other tags containing other things, as illustrated in below Figure .

Surrounding the content are different properties that make up the box:

• padding is the space between the content and the content’s border. Padding is what separates a photo from the border that frames the photo.
• border is the line that’s drawn around each edge of the box. You can have a border around all four sides, on just a single side, or any combination of sides.
• background-color fills the space inside the border, including the padding area.
• margin is what separates one tag from another. The space that commonly appears between the tops and bottoms of paragraphs of text on a web page, for example, is the margin.