demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Diagram of the CSS box model

The CSS Box Model

css / the box model

Estimated reading time: 2 minutes, 12 seconds

To CSS, every element is a box. The display box for an element has properties shown in the diagram above.

Note that inline elements cannot have a specified height, width or margin; otherwise, the box model for inline and block elements is the same. Also note that margin is on the outside of the element border; padding is on the inside. Margin is the space between element boxes; padding is inside each box.

Each of the properties shown, padding, margin and border, can be specified universally, or for individual sides. For example, p { margin: 2em; } would place a 2em margin equally on all sides of paragraph elements: 2em on the top of every paragraph, 2em on the left, 2em on the bottom and right.

p { margin-left: 2em; }

…would set a margin only on the left-hand side of the paragraph.

Border

border is the only property that takes several values at once: thickness, style and color, in that order. For example:

h3 { border: 2px solid red; }

These properties can also be specified individually, as border-thickness, border-style and border-color, but it is generally much more efficient to shortcut to a general border property. (If you want to be super-redundant, you can also specify these separate properties for individual sides: border-thickness-top. border-color-right and border-style-bottom, for example.)

The thickness of a border can be any measurement in any unit recognized by CSS, in addition to the keywords thin, medium and thick.

The border-style can take any of the following keywords: none, hidden (which is the same appearance as none), dotted, dashed, solid, double, groove, ridge, inset and outset. CSS3 adds dot-dash, dot-dot-dash, and wave. (It also adds more border properties, including border-radius, border-image and box-shadow).

color can take any of the CSS values for specifying color.

Outline

Technically, outline is a second border, added immediately outside the primary border. It takes the same values and properties as border, but substitutes the word outline. The property is used for : it provides visual feedback for links when the TAB key is pressed. It should be noted that outline is does not take up any physical space on the page, and will not affect your layout: outline is drawn on top of elements.

Important Note

The default CSS box model measures the width and height of content, not of the box itself: padding and border and added to the width and height of any element. This can be confusing and frustrating for new web developers. You can change this default behaviour and measure width and height of any element as containing border, padding and content by changing the box-sizing property in your CSS.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.