Although it does contain sections for styling non-visual media, CSS is at its heart a style language for visual presentation. Therefore, since authors will spend so much time worrying about the visual effects of their styles,css stonewallcss region free it is crucial to understand how these effects are constructed and laid out.
There are two basic layout mechanisms in CSS: the box model and the inline layout model. Although they are related, each has its own rules and effects, not all of which are intuitive. In addition, there are special rules to describe how positioned elements are laid out, and how floated elements are placed and sized. These rules are closely modeled on the box model, but there are some important differences.

The fundament of visual display under CSS is the box model. Familiarity with the various components of the box model enables the author to understand how a great many properties interact with each other, and to understand why pages appear as they do (or to figure out what’s going wrong in buggy browsers). The background of an element (whether color, image, or some combination) extends to the outer edge of the border, thus filling the content area and the padding. It will also be visible through any “gaps” in the border itself, such as those seen with the border-style values dotted, dashed, and double.

This must sometimes be accomplished by setting the left and right margins to negative values. In such cases, the element will appear to be wider than its parent element, and will "stick out" of the content area of its parent. Mathematically, however, the negative margins satisfy the above equation, and so the element can be said to be exactly as wide as the content area of its parent. This may seem disingenuous, since the visual effect is precisely the opposite, but this is permitted under CSS.

Only the margins, heightand width may be set to auto. The margins may be given negative lengths, but height and width may not. The padding and border widths default to 0 (zero), and may not be set to negative lengths. Vertically adjacent margins of elements in the normal document flow are collapsed. In other words, if two margins are vertically adjacent to each other, then the actual distance between the two element borders is the maximum of the adjacent margins. In the case of negative margins, the absolute maximum of the negative adjacent margins is subtracted from the maximum of the positive adjacent margins. The vertically adjacent margins of elements which have been floated or positioned do not collapse.

The mechanism of collapsing margins can be visualized as a paper- and-plastic model. In this model, each element is represented by a piece of paper upon which the element’s content has been written (or drawn). Any margins which surround the element are represented as strips of clear plastic attached to the edges of the paper. When one element follows another, they are slid together until the edge of one element’s plastic strip touches the edge of the other element’s paper. Thus, the plastic will overlap, but the pieces of paper will never be further apart than the width of the wider plastic strip. This holds true even if multiple elements are adjacent, such as one list ending and another beginning. There are four adjacent margins in this example, the bottom margins of the first list and its last list item, and the top margins of the second list and its first list item. The distance between the content of the two list items will be that of the largest of the four margins.

Placing 10-pixel margins on two adjacent inline elements will create a 20-pixel space between the right border of the first element and the left border of the second. Margins on floated and positioned elements are never collapsed, either horizontally or vertically.