Difference between Margin, Border, and Padding

In CSS, each element is represented as a rectangular box according to the standard CSS box model. The box allows us to define the size, position, and properties of these element's. Each box is composed of 4 parts: the content area, padding area, border area and margin area.

To help explain these spacing concepts the indvidual elements can be visualised as picture frames on a wall.

• Content Area: Bounded by the content edge, contains the "real" content of the element, such as text, images or video players. The sizing of the content is defined by width and height.
  (The actual image in a framed picture)


• Padding Area: Bounded by the Padding edge, is the spacing between the content area and border area. It extends the content area to include the element's padding.
  (The spacing between the image and the actual frame)


• Border Area: Bounded by the Border edge, wraps the element's content and any padding. It extends the padding area to include the element's borders.
  (The actual frame that encloses the image and mat)


• Margin Area: Bounded by the Margin edge, wraps the elements content, padding and border. It extends the border area to include an empty space to seprate the element from its neighbors.
  (The spacing between the different picture frames on the wall)