In web development, the CSS box model refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties. It is a fundamental concept for the composition of HTML webpages. The guidelines of the box model are described by web standards World Wide Web Consortium (W3C) specifically the CSS Working Group. For much of the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in mainstream browsers. With the advent of CSS2 in 1998, which introduced the box-sizing property, the problem had mostly been resolved. Specifics The Cascading Style Sheets (CSS) specification describes how elements of web pages are displayed by graphical browsers. Section 4 of the CSS1 specification defines a "formatting model" that gives block-level elements—such as p and blockquote—a width and height, and three levels of boxes surrounding it: padding, borders, and margins. While the specification never uses the term "box model" explicitly, the term has become widely used by web developers and web browser vendors. All HTML elements can be considered "boxes", this includes div tag, p tag, or a tag. Each of those boxes has five modifiable dimensions: the height and width describe dimensions of the actual content of the box (text, images, ...) the padding describes the space between this content and the border of the box the border is any kind of line (solid, dotted, dashed...) surrounding the box, if present the margin is the space around the border According to the CSS1 specification, released by W3C in 1996 and revised in 1999, when a width or height is explicitly specified for any block-level element, it should determine only the width or height of the visible element, with the padding, borders, and margins applied afterward. Before CSS3, this box model was known as W3C box model, in CSS3, it is known as the content-box. The total width of a box is therefore left-margin + left-border + left-padding + width + right-padding + right-border + right-margin. Similarly, the total height of a box equals top-margin + top-border + top-padding + height + bottom-padding + bottom-border + bottom-margin. For example, the following CSS code .myClass { width: 200px; height: 100px; padding: 10px; border: solid 10px black; margin: 10px; } would specify the box dimensions of each block belonging to 'myClass'. Moreover, each such box will have total height 160px and