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
|
---
title: Box model
slug: Web/CSS/box_model
translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
---
<h2 id="Resumo">Resumo</h2>
<p>Em uma página WEB, cada elemento é representado como um <em>box </em>retangular. Determinar o tamanho, propriedades - como sua cor, fundo, estilo das bordas - e a posição desses <em>boxes</em> é o objetivo do mecanismo de renderização.</p>
<p>No CSS, cada um desses <em>boxes </em>retangulares é descrita usando o <em>box model</em> padrão. Este modelo descreve o conteúdo do espaço ocupado por um elemento. Cada box possui 4 edges: <strong>margin edge</strong>, <strong>border edge</strong>, <strong>padding edge</strong> e <strong>content edge</strong>.</p>
<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p>
<p><a name="content"></a>A <strong>área de conteúdo </strong>(content area) é a área ocupada pelo conteúdo real do elemento. Ele frequentamente possui um fundo, uma cor de fonte ou uma imagem (nessa ordem, uma imagem opaca esconde a cor de fundo) e é localizada dentro do <em>content edge</em>; suas dimensões são a largura do conteúdo, ou largura do box de conteúdo, e altura do conteúdo, ou altura do box de conteúdo.</p>
<p>Se a propriedade CSS {{ cssxref("box-sizing") }} está configurada como padrão, as propriedades CSS {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} e {{ cssxref("max-height") }} controlam o tamanho do conteúdo.</p>
<p><a name="padding"></a>A <strong>área de preenchimento</strong> (padding area) estende-se para a borda em torno do enchimento. Quando a área de conteúdo tem um fundo, cor ou imagem, isso será estendido para a área de preenchimento, por esse motivo, você pode pensar o preenchimento como a extensão do conteúdo. O preenchimento está localizado dentro do <em>padding edge,</em> e suas dimensões são a <em>largura do padding-box </em>e a <em>altura do padding-box.</em></p>
<p>O espaço entre os edges de preenchimento e conteúdo podem ser controlados utilizando as seguintes propriedades CSS {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} e na forma generalizada {{ cssxref("padding") }}.</p>
<p><a name="border"></a>A <strong>área de borda </strong>(border area<strong>)</strong> estende a área de preenchimento para a área que contém as bordas. Esta é a área de dentro do <em>border edge</em>, e suas dimensões são a largura e a altura do <em>border-box. </em>Esta área depende do tamanho da borda que está definido pela propriedade {{ cssxref("border-width") }} ou pela propriedade {{ cssxref("border") }}.</p>
<p><a name="margin"></a>A <strong>área de margem </strong>(margin area) estende a área de borda com um espaço vazio utilizado para separar o elemento dos elementos vizinhos. Esta é a área de dentro do <em>margin edge,</em> e suas dimensões são a largura e a altura do <em>margin-box</em>.</p>
<p>O tamanho da área de margem é controlada utilizando as seguintes propriedades CSS {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} e na forma generalizada {{ cssxref("margin") }}.</p>
<p>Quando ocorre um <a href="/pt-BR/docs/Web/CSS/margin_collapsing" title="pt-BR/docs/Web/CSS/margin_collapsing">colapso de margens</a>, a área de margem não está claramente definida, uma vez que as margens são compartilhadas entre os boxes.</p>
<p>Finalmente, note que, para elementos não substituídos inline, o total de espaço ocupado (para a altura da linha) é determinado pela propriedade {{ cssxref('line-height') }}, mesmo que a borda e o padding aparecerem visualmente em torno do conteúdo.</p>
<h2 id="Especificação">Especificação</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Embora mais precisamente formulada, não existem mudanças práticas</td>
</tr>
<tr>
<td>{{ SpecName("CSS1","#formatting-model")}}</td>
<td>{{ Spec2('CSS1') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/pt-BR/docs/Web/CSS/CSS_Reference" title="Referência CSS">Referência CSS</a></li>
<li>{{ CSS_key_concepts() }}</li>
<li>Propriedades CSS relacionadas: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li>
</ul>
|
