CSS Box model Explained
The knowledge of CSS box model is very much important for anyone who aspire to learn CSS or HTML. What is CSS box model is frequent question among the newbie web developers.
According to the W3C candidate recommendation, the CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.
Rectangular boxes are generated for all the elements in a document tree. Quiet often these boxes are laid in the document as per the visual formatting given to the element in the css.
Box Dimensions
Each box has a content area, optionally surrounded with padding, border and margin properties. See the image to understand it better
The box model follows, element♦ > padding♦ > border♦ > margin♦ order of properties.
The box appearance of an element can be changes by altering the dimensions (width and height), padding, border, margin, properties in CSS.
The concept of CSS box model can be said as the virtual box generated for each element in a document tree.