Tutorial by Examples

The Edges The browser creates a rectangle for each element in the HTML document. The Box Model describes how the padding, border, and margin are added to the content to create this rectangle. Diagram from CSS2.2 Working Draft The perimeter of each of the four areas is called an edge. Each edge ...

The default box model (content-box) can be counter-intuitive, since the width / height for an element will not represent its actual width or height on screen as soon as you start adding padding and border styles to the element. The following example demonstrates this potential issue with content-...