Modelo de Caixas em CSS

Sabe como fizemos
uma coisa que

parecia como uma
caixa no último vídeo?

Criando esta "div" e depois

dando a ela uma
cor de fundo?

Bem, na verdade, cada
elemento na sua página

é considerado uma caixa
pelo navegador.

Mesmo que não pareça
uma caixa para você.

Este cabeçalho é uma caixa.

Este parágrafo é uma caixa.

Até mesmo este "span" que
fizemos é uma caixa.

Algumas caixas são grandes.

Algumas são pequenas.

Algumas são em uma mesma linha,
como este "span".

Outras são blocos, como o "div".

Mas elas todas são
consideradas caixas.

Por que isso importa?

Porque existe algo chamado de
Modelo de Caixas.

que você pode ver neste diagrama
que acabei de colar aqui.

Cada caixa de elemento
possui quatro partes.

O conteúdo em si, o enchimento,
a borda e a margem.

Podemos usar o CSS
para modificar

o enchimento, a borda
e a margem.

Você logo entenderá o
que eles realmente são.

Vamos começar com a margem.

que é esta área transparente
em volta da caixa,

que separa a caixa de
outros elementos.

Vamos especificar a margem usando
nossa unidade favorita: pixels.

Para adicionar 15px de margem em
todos os lados da caixa "oficial-info".

Podemos escrever:
"margin: 15px;"

Viu a mudança que fiz?

E se quiséssemos uma quantidade
diferente de margem em cada lado.

Por exemplo, mais no topo e embaixo
que na esquerda e direita.

Podemos escrever esses valores
na ordem de sentido horário,

começando do topo.

Então, 15 px no topo, 0px na direita,
10px na parte inferior e 6px na esquerda.

Ou, podemos usar propriedades
específicas para cada lado,

se você quiser especificar
apenas alguns lados.

Veja, se você quiser ter espaço
em volta da figura do gato, pela direita.

Também queremos algum
espaço na parte inferior.

E estamos felizes com o espaço padrão
de margem para os outros lados.

Há também um valor
especial para "margin",

que nos ajudará a fazer algo
legal nas nossas páginas.

Para lhe mostrar isso,
adicionarei uma "div",

em torno da página toda

e darei um "id" de "container".

Vamos por esta tag aqui,
para que contenha tudo.

Agora, adicionarei uma regra
para esta "div"

para lhe atribuir uma
largura de 400px.

E eu quero centralizá-la
na página.

Eu poderia especificar isso usando
"margin-left: 100px;",

porque isso parece centralizado
para mim,

mas pode não parecer
centralizado para você,

porque seu navegador por
ser maior ou menor.

O que queremos é dizer:

Dê-lhe a quantidade de
margem necessária

para que ela tenha margens
iguais em ambos os lados.

Isso é exatamente o que
é feito ao usar "margin: auto;".

E é uma ótima maneira de centralizar
"divs" em uma página.

Agora que centralizamos aquela "div"

Nós podemos fazê-la
ainda mais distinta,

adicionando uma borda
em torno dela.

usando a propriedade
"border" do css.

Vamos adicionar uma borda
vermelha a essa "div".

Digitamos "border" e depois temos que
especificar três aspectos da borda:

espessura, estilo e cor.

Para uma borda fina,
vou digitar 1px.

Para uma linha solida, nada
demais, digitarei "solid".

E para torná-la vermelha eu utilizarei
meu seletor de cores RGB

e escolherei uma cor vermelha
ardente bonita.

Ok.

Assim como com a margem, podemos
especificar a borda para apenas um lado.

Por exemplo, se quisermos uma
borda roxa grossa no topo,

adicionamos uma outra propriedade:
"border-top: 10px solid purple;"

Legal.

Agora, vamos adicionar uma
moldura na imagem

e brincar com os
estilos de borda.

Então voltando para nosso "cute-cat",
digitamos: "border: 6px groove red;"

Bom, não gostei do "groove",
vamos tentar "double".

Eh... vamos tentar "ridge".

Ah ha! Isso sim parece uma moldura.

Ok, que tal uma borda, em
volta de "oficial-info"?

Vejamos, digite: "border". Não
vamos fazê-la muito grande, 2px.

Vamos tentar "dotted" e vamos
escolher um cinza sutil.

Ah, em vez disso deixe-me
tentar "dashed" .

Ok, isto é o que quero.

Bom, com todas essas bordas, uma
coisa está me incomodando um pouco.

Na verdade, está me incomodando muito.

Vê como o texto está posicionado
próximo à borda no "container"?

E também está se intrometendo
no texto dentro de "oficial-info"?

Isso é uma aparência
muito grosseira

e torna difícil ler o texto.

Aí é onde o enchimento entra.

Toda vez que seus elementos tiverem
cores de fundo ou bordas,

você quase sempre irá querer
adicionar um enchimento,

para colocar um pouco de espaço
entre os conteúdos e as bordas.

Vamos adicionar algum enchimento
ao "container".

Vamos por 15px em
torno do "container".

Oh, muito melhor.

Vamos adicionar algum enchimento
à nossa "oficial-info".

Desta forma: "padding: 6px;"
Oh, lindo!

Não precisamos adicionar
enchimento na imagem,

já que imagens tem boa aparência
dentro de molduras como esta.

E aí está: o Modelo de Caixas.

Margem, borda e enchimento.

Eu usei valores grandes e cores brilhantes
para mostrá-los para você.

Mas minha página parece um
pouco mais elegante agora.

Se você quer que sua página
pareça suave e sofisticada,

tente usar brancos e cinzas mais sutis.

O que quer que faça, certifique-se
de usar estas propriedades,

porque elas terão grande efeito
sobre a aparência da sua página.

Legendado por [Carlos A. N. C. R.] Revisado por [Alef Almeida].