CSS Box Model

Properties controlling the flow of content in a box

• box-decoration-break (en-US)
• box-sizing
• overflow (en-US)
• overflow-x (en-US)
• overflow-y (en-US)

Properties controlling the size of a box

• height
• width
• max-height (en-US)
• max-width (en-US)
• min-height (en-US)
• min-width (en-US)

Properties controlling the margins of a box

• margin (en-US)
• margin-bottom (en-US)
• margin-left (en-US)
• margin-right (en-US)
• margin-top (en-US)

Properties controlling the paddings of a box

• padding (en-US)
• padding-bottom (en-US)
• padding-left (en-US)
• padding-right (en-US)
• padding-top (en-US)

Other properties

• box-shadow
• visibility (en-US)

Introduction to the CSS box model (en-US)

Explains one of the fundamental concept of CSS, the box model: describes the meaning of the margin, padding, as well as the different areas of a box.

Mastering margin collapsing

In several cases, two adjacent margins are collapsed into one. This article describes when this is happening and how to control it.

Box-shadow generator (en-US)

An interactive tool that allows to visually create shadows and to generate the needed syntax for the box-shadow property.