When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties(color, background, border size, etc.) of these boxes.
Except for the element’s actual content area, each box can also have padding, border and margin from inside to outside. In the inspector in Chrome, when you select an element, you’ll see the box model like this:
Content – the blue box
The content area can be defined by width and height properties by default.
If not defined, it will be the size of the real content.
Padding – the green box
The padding area is the space between the element’s content and its border. If a background color is applied to this element, it will also apply to the padding area.
The thickness of the padding is determined by the padding property.
padding: 20px;(This means all the four edges will be 20px)
padding: 10px 20px;(The first value is top & bottom, and the second is left & right)
padding: 10px 20px 40px 0;(The order of the value is top, right, bottom, left)
You can also define the four edges differently by using padding-top, padding-right, padding-bottom, padding-left.
If not defined, the padding thickness will be 0.
Border – the yellow box
You can specify the style, width, and color of an element's border using the border property, or separately using border-color, border-style, border-width.
The thickness of the border is determined by the border-width property. The pattern is the same as padding.
You can also specify whether the element will have border on all four edges by using border-bottom-width, border-left-width, border-right-width, border-top-width.
If not defined, the border thickness will be 0.
Margin – the orange box
The margin area is the space outside the element’s border. It can be used to define its distance with other elements. The margin area is always transparent.
The thickness of the padding is determined by the margin property. The pattern is the same as padding.
You can also define the four edges differently by using marging-top, margin-right, margin-bottom, margin-left.
As we mentioned before, there are block elements and inline elements. The block elements will have some margin by default, while the inline elements won’t have any margin.
To define the size of an element’s content area, we can use width, height, max-width, max-height, min-width, min-height.
The min- and max- properties can override width and height.
The value for these properties can use all of the CSS units here: +CSS Basics: CSS-Units
CSS Position
The position property specifies the type of positioning method used for an element. There are five different position values:
Static
This is the default positioning method in the browser.
A static element is always positioned according to the normal flow of the page.
Relative
A relative element is positioned relative to its normal position.
A relative element behaves the same as a static element unless you add some extra properties.
Absolute
An absolute element with is positioned relative to the nearest positioned ancestor. If there’s no positioned ancestor, it will be relative to the document body.
Absolute elements are removed from the normal flow, and can overlap elements.
CSS Basic Box Model
CSS Position