The Box Model
Everything that displays in an HTML website styled with CSS is in a box of some kind. A box is an HTML element. It can contain anything – text, an image, forms, even other boxes. 
Margin, Padding, and Borders
Boxes are separated from one another using margin and padding. A border, whether defined or not, wraps around an element’s contents. Padding is used to provide space between an element’s border and its contents. Margin is used to provide invisible space between two or more elements from their borders.
Padding, Width, Height, and Actual Dimensions
A box’s actual dimensions may not match the element’s dimensions. For example, we could define a paragraph element with a width of 150 pixels, 50 pixels of padding. Since the box grows from the center, the box’s width is the sum of the paragraph’s width and padding. The actual total width of the box is 250 pixels.
Divisional Elements
A divisional element, or div, is a generic box. Divs are used to group other elements and boxes together, and divide others.