08/01/2017

BoxmodelCSS|MDN

Box model
Resumo
Em uma pgina WEB, cada elemento representado como um box retangular. Determinaro tamanho,
propriedades - como sua cor, fundo, estilo das bordas- e a posio desses boxes o objetivo do
mecanismode renderizao.
No CSS, cada um desses boxesretangulares descrita usando o box model padro. Este modelo descreve o
contedo do espao ocupado por um elemento. Cada box possui 4 edges:margin edge, border edge,
padding edge e content edge.

A rea de contedo (content area) a rea ocupada pelo contedo 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 content edge; suas dimenses so a largura do contedo, ou largura do box
decontedo, e altura do contedo, ou altura do box de contedo.
Se a propriedade CSSboxsizing est congurada como padro, as propriedades CSS width, minwidth,
maxwidth, height, minheight e maxheight controlam o tamanho do contedo.
A rea de preenchimento(padding area) estende-se para a borda em torno do enchimento. Quando a rea
de contedo tem um fundo, corou imagem, isso ser estendido para a rea de preenchimento, por esse

https://developer.mozilla.org/ptBR/docs/Web/CSS/box_model

1/3

08/01/2017

BoxmodelCSS|MDN

motivo, voc pode pensar o preenchimento como a extenso do contedo. O preenchimento est localizado
dentro do padding edge,e suas dimenses so a largura do padding-boxe a altura do padding-box.
O espao entre os edges de preenchimento e contedo podem ser controlados utilizando as seguintes
propriedades CSSpaddingtop, paddingright, paddingbottom, paddingleft e na forma
generalizadapadding.
A rea de borda(border area) estende a rea de preenchimento para a rea que contm as bordas.Esta a
rea de dentro do border edge, e suas dimenses so a largura e a alturado border-box. Esta rea depende do
tamanho da borda que est denido pela propriedadeborderwidth ou pela propriedadeborder.
A rea de margem(margin area) estende a rea de borda com um espao vazio utilizado para separar o
elemento dos elementos vizinhos. Esta a rea de dentro do margin edge,e suas dimenses so a largura e a
altura domargin-box.
O tamanho da rea de margem controlada utilizando as seguintes propriedades CSSmargintop, margin
right, marginbottom, marginleft e na forma generalizadamargin.
Quando ocorre um colapso de margens, a rea de margem no est claramente denida, uma vez que as
margens so compartilhadas entre osboxes.
Finalmente, note que, para elementos no substitudos inline, o total de espao ocupado (para a altura da
linha) determinado pela propriedade lineheight,mesmo que a borda e o padding aparecerem
visualmente emtorno do contedo.

Especicao
Especicao
CSS Level2
(Revision1)

CSS Level1

Status
RE C

Recommendation
RE C

Recommendation

Comentrio
Embora mais precisamente formulada, no existem
mudanas prticas

Veja tambm
Referncia CSS
CSS Key Concepts: CSS syntax, specicity and inheritance, the box, layout modes and visual formatting
models, and margin collapsing, or the initial, computed, used and actual values. Denitions of value
syntax, shorthand properties and replaced elements.
Propriedades CSS relacionadas: boxsizing, backgroundclip,height, maxheight, minheight,
width, maxheight, minheight, padding, paddingtop, paddingright, paddingbottom, padding
left, border, bordertop, borderright, borderbottom, borderleft, borderwidth, bordertop
width, borderrightwidth, borderbottomwidth, borderleftwidth, margin, margintop, margin
right, marginbottom, marginleft

https://developer.mozilla.org/ptBR/docs/Web/CSS/box_model

2/3