---
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
- {{cssxref("box-decoration-break")}}
- {{cssxref("box-sizing")}}
- {{cssxref("overflow")}}
- {{cssxref("overflow-x")}}
- {{cssxref("overflow-y")}}
Properties controlling the size of a box
- {{cssxref("height")}}
- {{cssxref("width")}}
- {{cssxref("max-height")}}
- {{cssxref("max-width")}}
- {{cssxref("min-height")}}
- {{cssxref("min-width")}}
Properties controlling the margins of a box
- {{cssxref("margin")}}
- {{cssxref("margin-bottom")}}
- {{cssxref("margin-left")}}
- {{cssxref("margin-right")}}
- {{cssxref("margin-top")}}
Properties controlling the paddings of a box
- {{cssxref("padding")}}
- {{cssxref("padding-bottom")}}
- {{cssxref("padding-left")}}
- {{cssxref("padding-right")}}
- {{cssxref("padding-top")}}
Other properties
- {{cssxref("box-shadow")}}
- {{cssxref("visibility")}}
- 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 |