blob: cb4dd913437c524946b9491741ea819d3d7e4735 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
---
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
---
<div>{{CSSRef}}</div>
<p><strong>CSS Box Model</strong> 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.</p>
<h2 id="Reference">Reference</h2>
<h3 id="Properties">Properties</h3>
<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4>
<div class="index">
<ul>
<li>{{cssxref("box-decoration-break")}}</li>
<li>{{cssxref("box-sizing")}}</li>
<li>{{cssxref("overflow")}}</li>
<li>{{cssxref("overflow-x")}}</li>
<li>{{cssxref("overflow-y")}}</li>
</ul>
</div>
<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4>
<div class="index">
<ul>
<li>{{cssxref("height")}}</li>
<li>{{cssxref("width")}}</li>
<li>{{cssxref("max-height")}}</li>
<li>{{cssxref("max-width")}}</li>
<li>{{cssxref("min-height")}}</li>
<li>{{cssxref("min-width")}}</li>
</ul>
</div>
<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4>
<div class="index">
<ul>
<li>{{cssxref("margin")}}</li>
<li>{{cssxref("margin-bottom")}}</li>
<li>{{cssxref("margin-left")}}</li>
<li>{{cssxref("margin-right")}}</li>
<li>{{cssxref("margin-top")}}</li>
</ul>
</div>
<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4>
<div class="index">
<ul>
<li>{{cssxref("padding")}}</li>
<li>{{cssxref("padding-bottom")}}</li>
<li>{{cssxref("padding-left")}}</li>
<li>{{cssxref("padding-right")}}</li>
<li>{{cssxref("padding-top")}}</li>
</ul>
</div>
<h4 id="Other_properties">Other properties</h4>
<div class="index">
<ul>
<li>{{cssxref("box-shadow")}}</li>
<li>{{cssxref("visibility")}}</li>
</ul>
</div>
<h2 id="Guides_and_tools">Guides and tools</h2>
<dl>
<dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt>
<dd>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.</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt>
<dd>In several cases, two adjacent margins are collapsed into one. This article describes when this is happening and how to control it.</dd>
<dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a></dt>
<dd>An interactive tool that allows to visually create shadows and to generate the needed syntax for the {{cssxref("box-shadow")}} property.</dd>
</dl>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Box")}}</td>
<td>{{Spec2("CSS3 Box")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "box.html")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("CSS1")}}</td>
<td>{{Spec2("CSS1")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1")}}</td>
<td>3.0</td>
<td>3.5</td>
<td>1.0 (85)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatGeckoMobile("1")}}</td>
<td>6.0</td>
<td>6.0</td>
<td>1.0</td>
</tr>
</tbody>
</table>
</div>
|
