The browser creates a rectangle for each element in the HTML document. The Box Model describes how the padding, border, and margin are added to the content to create this rectangle.
CSS Box Model
Diagram from CSS2.2 Working Draft
The perimeter of each of the four areas is called an edge. Each edge defines a box.
[padding](<http://stackoverflow.com/documentation/css/1255/padding>)
property. If there is no padding
width defined, the padding edge is equal to the content edge.[border](<http://stackoverflow.com/documentation/css/2160/border>)
property. If there is no border
width defined, the border edge is equal to the padding edge.[margin](<http://stackoverflow.com/documentation/css/305/margins>)
property. If there is no margin
width defined, the margin edge is equal to the border edge.div {
border: 5px solid red;
margin: 50px;
padding: 20px;
}
This CSS styles all div
elements to have a top, right, bottom and left border of 5px
in width; a top, right, bottom and left margin of 50px
; and a top, right, bottom, and left padding of 20px
. Ignoring content, our generated box will look like this:
Box Model for Above Example
Screenshot of Google Chrome’s Element Styles panel
padding
property (40px by 40px).border
property (50px by 50px).