Box Model:
The CSS box model is the foundation of layout on the Web. each element is represented as a rectangular box, with the 4 properties of box’s content, padding, border, and margin built up around one another in layers. As a browser renders a web page layout, it works out what styles are applied to the content of each box, how big the surrounding layers are, and where the boxes sit in relation to one another. Before understanding how to create CSS layouts, we need to understand the box model.
- The width and height properties set the width and height of the content box, which is the area in which the content of the box is displayed — this content includes both text content sat inside the box, and other boxes representing nested child elements.
- Padding refers to the inner margin of a CSS box — between the outer edge of the content box and the inner edge of the border. The size of this layer can be set on all four sides at once with the padding shorthand property, or one side at a time with the padding-top, padding-right, padding-bottom and padding-left properties.
- The border of a CSS box sits between the outer edge of the padding and the inner edge of the margin. By default the border has a size of 0 — making it invisible — but you can set the thickness, style and color of the border to make it appear. The border shorthand property allows you to set all of these on all four sides at once, for example border: 1px solid black. This can be broken down into numerous different longhand properties for more specific styling needs:
border-top, border-right, border-bottom, border-left: Set the thickness, style and color of one side of the border. border-width, border-style, border-color: Set only the thickness, style, or color individually, but for all four sides of the border. You can also set one of the three properties of a single side of the border individually, using border-top-width, border-top-style, border-top-color, etc.
- The margin surrounds a CSS box, and pushes up against other CSS boxes in the layout. It behaves rather like padding; the shorthand property is margin and the individual properties are margin-top, margin-right, margin-bottom, and margin-left.
