CSS box Model--specifies How the element frame handles element content, padding, borders, and margins

Transferred from: http://www.w3school.com.cn/css/css_boxmodel.asp

To know the transformation of the box model in the case of the parent element: float, rel, ABS position, see: http://www.cnblogs.com/hh54188/archive/2010/12/28/1919078.html, in addition, For how to calculate the width and height of the parent element, The article also explains the ~

CSS Box Model Overview

The inner part of the element box is the actual content, and the content is directly surrounded by the Padding. The inner margin renders the background of the Element. The edge of the padding is a border. Outside the bounding rectangle is the margin, and the margin is transparent by default, so it does not obscure any subsequent elements.

Tip: the background is applied to areas that consist of content and padding, and Borders.

The padding, borders, and margins are optional and the default value is Zero. however, Many elements will have margins and padding set by the user-agent style Sheet. You can override these browser styles by setting the margin and padding of the elements to Zero. This can be done separately, or all elements can be set using the Universal selector:

* {  margin:0;  padding:0;}

In CSS, width and height refer to the widths and heights of the content Area. Increasing the padding, borders, and margins does not affect the size of the content area, but increases the total size of the element box.

Assume that there are 10-pixel margins and 5-pixel padding on each edge of a box. If you want this element box to reach 100 pixels, you need to set the width of the content to 70 pixels, see:

#box {  width:70px;  margin:10px;  padding:5px;}

Tip: padding, borders, and margins can be applied to all edges of an element or to individual Edges.

Tip: margins can be negative, and in many cases negative margins are used.

CSS box Model--specifies How the element frame handles element content, padding, borders, and margins