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].