0:00:00.529,0:00:02.467
Sabe como fizemos [br]uma coisa que

0:00:02.467,0:00:04.798
parecia como uma[br]caixa no último vídeo?

0:00:04.798,0:00:06.722
Criando esta "div" e depois

0:00:06.722,0:00:08.614
dando a ela uma [br]cor de fundo?

0:00:08.618,0:00:11.098
Bem, na verdade, cada [br]elemento na sua página

0:00:11.098,0:00:13.924
é considerado uma caixa[br]pelo navegador.

0:00:13.924,0:00:16.726
Mesmo que não pareça [br]uma caixa para você.

0:00:16.726,0:00:18.683
Este cabeçalho é uma caixa.

0:00:18.683,0:00:20.999
Este parágrafo é uma caixa.

0:00:20.999,0:00:23.894
Até mesmo este "span" que[br]fizemos é uma caixa.

0:00:23.894,0:00:26.466
Algumas caixas são grandes.

0:00:26.466,0:00:28.393
Algumas são pequenas.

0:00:28.393,0:00:31.088
Algumas são em uma mesma linha,[br]como este "span".

0:00:31.088,0:00:33.488
Outras são blocos, como o "div".

0:00:33.488,0:00:36.517
Mas elas todas são [br]consideradas caixas.

0:00:36.517,0:00:38.301
Por que isso importa?

0:00:38.301,0:00:40.853
Porque existe algo chamado de[br]Modelo de Caixas.

0:00:40.853,0:00:43.740
que você pode ver neste diagrama[br]que acabei de colar aqui.

0:00:43.740,0:00:46.379
Cada caixa de elemento [br]possui quatro partes.

0:00:46.379,0:00:51.321
O conteúdo em si, o enchimento,[br]a borda e a margem.

0:00:51.321,0:00:53.185
Podemos usar o CSS[br]para modificar

0:00:53.185,0:00:54.796
o enchimento, a borda[br]e a margem.

0:00:54.796,0:00:57.819
Você logo entenderá o [br]que eles realmente são.

0:00:57.819,0:00:59.535
Vamos começar com a margem.

0:00:59.535,0:01:01.945
que é esta área transparente[br]em volta da caixa,

0:01:01.945,0:01:04.896
que separa a caixa de[br]outros elementos.

0:01:04.896,0:01:08.802
Vamos especificar a margem usando[br]nossa unidade favorita: pixels.

0:01:08.802,0:01:13.803
Para adicionar 15px de margem em[br]todos os lados da caixa "oficial-info".

0:01:13.803,0:01:20.654
Podemos escrever:[br]"margin: 15px;"

0:01:20.654,0:01:22.754
Viu a mudança que fiz?

0:01:22.754,0:01:25.945
E se quiséssemos uma quantidade [br]diferente de margem em cada lado.

0:01:25.945,0:01:29.316
Por exemplo, mais no topo e embaixo[br]que na esquerda e direita.

0:01:29.316,0:01:32.199
Podemos escrever esses valores[br]na ordem de sentido horário,

0:01:32.199,0:01:33.528
começando do topo.

0:01:33.528,0:01:41.447
Então, 15 px no topo, 0px na direita, [br]10px na parte inferior e 6px na esquerda.

0:01:42.997,0:01:46.057
Ou, podemos usar propriedades[br]específicas para cada lado,

0:01:46.057,0:01:48.349
se você quiser especificar[br]apenas alguns lados.

0:01:48.349,0:01:54.880
Veja, se você quiser ter espaço [br]em volta da figura do gato, pela direita.

0:01:55.494,0:02:00.583
Também queremos algum[br]espaço na parte inferior.

0:02:00.583,0:02:04.034
E estamos felizes com o espaço padrão[br]de margem para os outros lados.

0:02:04.904,0:02:07.603
Há também um valor [br]especial para "margin",

0:02:07.603,0:02:10.268
que nos ajudará a fazer algo [br]legal nas nossas páginas.

0:02:10.268,0:02:12.953
Para lhe mostrar isso, [br]adicionarei uma "div",

0:02:12.953,0:02:15.314
em torno da página toda

0:02:15.314,0:02:18.367
e darei um "id" de "container".

0:02:18.367,0:02:22.735
Vamos por esta tag aqui,[br]para que contenha tudo.

0:02:23.315,0:02:27.339
Agora, adicionarei uma regra[br]para esta "div"

0:02:27.339,0:02:30.498
para lhe atribuir uma[br]largura de 400px.

0:02:31.168,0:02:33.702
E eu quero centralizá-la[br]na página.

0:02:33.702,0:02:38.240
Eu poderia especificar isso usando[br]"margin-left: 100px;",

0:02:38.240,0:02:40.201
porque isso parece centralizado[br]para mim,

0:02:40.201,0:02:42.278
mas pode não parecer[br]centralizado para você,

0:02:42.278,0:02:44.612
porque seu navegador por[br]ser maior ou menor.

0:02:44.612,0:02:46.054
O que queremos é dizer:

0:02:46.054,0:02:48.832
Dê-lhe a quantidade de [br]margem necessária

0:02:48.832,0:02:52.479
para que ela tenha margens[br]iguais em ambos os lados.

0:02:52.479,0:02:56.179
Isso é exatamente o que[br]é feito ao usar "margin: auto;".

0:02:56.179,0:02:58.438
E é uma ótima maneira de centralizar[br]"divs" em uma página.

0:03:00.058,0:03:02.180
Agora que centralizamos aquela "div"

0:03:02.180,0:03:04.322
Nós podemos fazê-la [br]ainda mais distinta,

0:03:04.322,0:03:06.423
adicionando uma borda[br]em torno dela.

0:03:06.723,0:03:08.938
usando a propriedade[br]"border" do css.

0:03:08.938,0:03:12.606
Vamos adicionar uma borda[br]vermelha a essa "div".

0:03:13.006,0:03:17.329
Digitamos "border" e depois temos que[br]especificar três aspectos da borda:

0:03:17.329,0:03:19.259
espessura, estilo e cor.

0:03:19.259,0:03:22.415
Para uma borda fina,[br]vou digitar 1px.

0:03:22.415,0:03:26.351
Para uma linha solida, nada[br]demais, digitarei "solid".

0:03:26.351,0:03:31.679
E para torná-la vermelha eu utilizarei[br]meu seletor de cores RGB

0:03:31.679,0:03:34.315
e escolherei uma cor vermelha[br]ardente bonita.

0:03:34.985,0:03:36.226
Ok.

0:03:37.115,0:03:41.841
Assim como com a margem, podemos[br]especificar a borda para apenas um lado.

0:03:41.841,0:03:46.551
Por exemplo, se quisermos uma[br]borda roxa grossa no topo,

0:03:46.551,0:03:53.846
adicionamos uma outra propriedade:[br]"border-top: 10px solid purple;"

0:03:53.846,0:03:54.735
Legal.

0:03:55.615,0:03:58.293
Agora, vamos adicionar uma[br]moldura na imagem

0:03:58.293,0:04:00.642
e brincar com os[br]estilos de borda.

0:04:01.192,0:04:11.585
Então voltando para nosso "cute-cat",[br]digitamos: "border: 6px groove red;"

0:04:11.585,0:04:15.203
Bom, não gostei do "groove",[br]vamos tentar "double".

0:04:15.203,0:04:17.943
Eh... vamos tentar "ridge".

0:04:17.943,0:04:20.073
Ah ha! Isso sim parece uma moldura.

0:04:20.853,0:04:23.844
Ok, que tal uma borda, em [br]volta de "oficial-info"?

0:04:24.544,0:04:28.442
Vejamos, digite: "border". Não [br]vamos fazê-la muito grande, 2px.

0:04:28.442,0:04:34.141
Vamos tentar "dotted" e vamos[br]escolher um cinza sutil.

0:04:34.283,0:04:36.976
Ah, em vez disso deixe-me[br]tentar "dashed" .

0:04:36.976,0:04:38.796
Ok, isto é o que quero.

0:04:39.626,0:04:42.421
Bom, com todas essas bordas, uma [br]coisa está me incomodando um pouco.

0:04:42.421,0:04:45.463
Na verdade, está me incomodando muito.

0:04:46.103,0:04:50.836
Vê como o texto está posicionado[br]próximo à borda no "container"?

0:04:50.836,0:04:54.443
E também está se intrometendo [br]no texto dentro de "oficial-info"?

0:04:54.443,0:04:56.350
Isso é uma aparência [br]muito grosseira

0:04:56.350,0:04:58.943
e torna difícil ler o texto.

0:04:58.943,0:05:01.040
Aí é onde o enchimento entra.

0:05:01.040,0:05:04.035
Toda vez que seus elementos tiverem[br]cores de fundo ou bordas,

0:05:04.035,0:05:06.519
você quase sempre irá querer[br]adicionar um enchimento,

0:05:06.519,0:05:08.725
para colocar um pouco de espaço[br]entre os conteúdos e as bordas.

0:05:09.475,0:05:12.185
Vamos adicionar algum enchimento[br]ao "container".

0:05:12.245,0:05:16.908
Vamos por 15px em[br]torno do "container".

0:05:16.908,0:05:19.303
Oh, muito melhor.

0:05:19.303,0:05:22.851
Vamos adicionar algum enchimento[br]à nossa "oficial-info".

0:05:22.851,0:05:26.999
Desta forma: "padding: 6px;"[br]Oh, lindo!

0:05:27.539,0:05:29.415
Não precisamos adicionar[br]enchimento na imagem,

0:05:29.415,0:05:32.208
já que imagens tem boa aparência[br]dentro de molduras como esta.

0:05:33.108,0:05:35.114
E aí está: o Modelo de Caixas.

0:05:35.114,0:05:36.836
Margem, borda e enchimento.

0:05:36.836,0:05:40.085
Eu usei valores grandes e cores brilhantes[br]para mostrá-los para você.

0:05:40.085,0:05:42.770
Mas minha página parece um[br]pouco mais elegante agora.

0:05:42.770,0:05:45.516
Se você quer que sua página[br]pareça suave e sofisticada,

0:05:45.516,0:05:48.139
tente usar brancos e cinzas mais sutis.

0:05:48.139,0:05:50.582
O que quer que faça, certifique-se[br]de usar estas propriedades,

0:05:50.582,0:05:53.873
porque elas terão grande efeito [br]sobre a aparência da sua página.

0:05:53.873,0:05:55.365
Legendado por [Carlos A. N. C. R.] Revisado por [Alef Almeida].