--- title: CSS Box Model slug: Web/CSS/CSS_Box_Model tags: - CSS - CSS Box Model - CSS Reference - NeedsTranslation - Overview - TopicStub translation_of: Web/CSS/CSS_Box_Model ---
{{CSSRef}}

CSS Box Model is a CSS module that defines the rectangular boxes, including their padding and margin, that are generated for elements and laid out according to the visual formatting model.

Reference

Properties

Properties controlling the flow of content in a box

Properties controlling the size of a box

Properties controlling the margins of a box

Properties controlling the paddings of a box

Other properties

Guides and tools

Introduction to the CSS box model
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
An interactive tool that allows to visually create shadows and to generate the needed syntax for the {{cssxref("box-shadow")}} property.

Specifications

Specification Status Comment
{{SpecName("CSS3 Box")}} {{Spec2("CSS3 Box")}}  
{{SpecName("CSS2.1", "box.html")}} {{Spec2("CSS2.1")}}  
{{SpecName("CSS1")}} {{Spec2("CSS1")}} Initial definition

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{CompatGeckoDesktop("1")}} 3.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 {{CompatGeckoMobile("1")}} 6.0 6.0 1.0