1
00:00:00,529 --> 00:00:02,467
Sabe como fizemos 
uma coisa que

2
00:00:02,467 --> 00:00:04,798
parecia como uma
caixa no último vídeo?

3
00:00:04,798 --> 00:00:06,722
Criando esta "div" e depois

4
00:00:06,722 --> 00:00:08,614
dando a ela uma 
cor de fundo?

5
00:00:08,618 --> 00:00:11,098
Bem, na verdade, cada 
elemento na sua página

6
00:00:11,098 --> 00:00:13,924
é considerado uma caixa
pelo navegador.

7
00:00:13,924 --> 00:00:16,726
Mesmo que não pareça 
uma caixa para você.

8
00:00:16,726 --> 00:00:18,683
Este cabeçalho é uma caixa.

9
00:00:18,683 --> 00:00:20,999
Este parágrafo é uma caixa.

10
00:00:20,999 --> 00:00:23,894
Até mesmo este "span" que
fizemos é uma caixa.

11
00:00:23,894 --> 00:00:26,466
Algumas caixas são grandes.

12
00:00:26,466 --> 00:00:28,393
Algumas são pequenas.

13
00:00:28,393 --> 00:00:31,088
Algumas são em uma mesma linha,
como este "span".

14
00:00:31,088 --> 00:00:33,488
Outras são blocos, como o "div".

15
00:00:33,488 --> 00:00:36,517
Mas elas todas são 
consideradas caixas.

16
00:00:36,517 --> 00:00:38,301
Por que isso importa?

17
00:00:38,301 --> 00:00:40,853
Porque existe algo chamado de
Modelo de Caixas.

18
00:00:40,853 --> 00:00:43,740
que você pode ver neste diagrama
que acabei de colar aqui.

19
00:00:43,740 --> 00:00:46,379
Cada caixa de elemento 
possui quatro partes.

20
00:00:46,379 --> 00:00:51,321
O conteúdo em si, o enchimento,
a borda e a margem.

21
00:00:51,321 --> 00:00:53,185
Podemos usar o CSS
para modificar

22
00:00:53,185 --> 00:00:54,796
o enchimento, a borda
e a margem.

23
00:00:54,796 --> 00:00:57,819
Você logo entenderá o 
que eles realmente são.

24
00:00:57,819 --> 00:00:59,535
Vamos começar com a margem.

25
00:00:59,535 --> 00:01:01,945
que é esta área transparente
em volta da caixa,

26
00:01:01,945 --> 00:01:04,896
que separa a caixa de
outros elementos.

27
00:01:04,896 --> 00:01:08,802
Vamos especificar a margem usando
nossa unidade favorita: pixels.

28
00:01:08,802 --> 00:01:13,803
Para adicionar 15px de margem em
todos os lados da caixa "oficial-info".

29
00:01:13,803 --> 00:01:20,654
Podemos escrever:
"margin: 15px;"

30
00:01:20,654 --> 00:01:22,754
Viu a mudança que fiz?

31
00:01:22,754 --> 00:01:25,945
E se quiséssemos uma quantidade 
diferente de margem em cada lado.

32
00:01:25,945 --> 00:01:29,316
Por exemplo, mais no topo e embaixo
que na esquerda e direita.

33
00:01:29,316 --> 00:01:32,199
Podemos escrever esses valores
na ordem de sentido horário,

34
00:01:32,199 --> 00:01:33,528
começando do topo.

35
00:01:33,528 --> 00:01:41,447
Então, 15 px no topo, 0px na direita, 
10px na parte inferior e 6px na esquerda.

36
00:01:42,997 --> 00:01:46,057
Ou, podemos usar propriedades
específicas para cada lado,

37
00:01:46,057 --> 00:01:48,349
se você quiser especificar
apenas alguns lados.

38
00:01:48,349 --> 00:01:54,880
Veja, se você quiser ter espaço 
em volta da figura do gato, pela direita.

39
00:01:55,494 --> 00:02:00,583
Também queremos algum
espaço na parte inferior.

40
00:02:00,583 --> 00:02:04,034
E estamos felizes com o espaço padrão
de margem para os outros lados.

41
00:02:04,904 --> 00:02:07,603
Há também um valor 
especial para "margin",

42
00:02:07,603 --> 00:02:10,268
que nos ajudará a fazer algo 
legal nas nossas páginas.

43
00:02:10,268 --> 00:02:12,953
Para lhe mostrar isso, 
adicionarei uma "div",

44
00:02:12,953 --> 00:02:15,314
em torno da página toda

45
00:02:15,314 --> 00:02:18,367
e darei um "id" de "container".

46
00:02:18,367 --> 00:02:22,735
Vamos por esta tag aqui,
para que contenha tudo.

47
00:02:23,315 --> 00:02:27,339
Agora, adicionarei uma regra
para esta "div"

48
00:02:27,339 --> 00:02:30,498
para lhe atribuir uma
largura de 400px.

49
00:02:31,168 --> 00:02:33,702
E eu quero centralizá-la
na página.

50
00:02:33,702 --> 00:02:38,240
Eu poderia especificar isso usando
"margin-left: 100px;",

51
00:02:38,240 --> 00:02:40,201
porque isso parece centralizado
para mim,

52
00:02:40,201 --> 00:02:42,278
mas pode não parecer
centralizado para você,

53
00:02:42,278 --> 00:02:44,612
porque seu navegador por
ser maior ou menor.

54
00:02:44,612 --> 00:02:46,054
O que queremos é dizer:

55
00:02:46,054 --> 00:02:48,832
Dê-lhe a quantidade de 
margem necessária

56
00:02:48,832 --> 00:02:52,479
para que ela tenha margens
iguais em ambos os lados.

57
00:02:52,479 --> 00:02:56,179
Isso é exatamente o que
é feito ao usar "margin: auto;".

58
00:02:56,179 --> 00:02:58,438
E é uma ótima maneira de centralizar
"divs" em uma página.

59
00:03:00,058 --> 00:03:02,180
Agora que centralizamos aquela "div"

60
00:03:02,180 --> 00:03:04,322
Nós podemos fazê-la 
ainda mais distinta,

61
00:03:04,322 --> 00:03:06,423
adicionando uma borda
em torno dela.

62
00:03:06,723 --> 00:03:08,938
usando a propriedade
"border" do css.

63
00:03:08,938 --> 00:03:12,606
Vamos adicionar uma borda
vermelha a essa "div".

64
00:03:13,006 --> 00:03:17,329
Digitamos "border" e depois temos que
especificar três aspectos da borda:

65
00:03:17,329 --> 00:03:19,259
espessura, estilo e cor.

66
00:03:19,259 --> 00:03:22,415
Para uma borda fina,
vou digitar 1px.

67
00:03:22,415 --> 00:03:26,351
Para uma linha solida, nada
demais, digitarei "solid".

68
00:03:26,351 --> 00:03:31,679
E para torná-la vermelha eu utilizarei
meu seletor de cores RGB

69
00:03:31,679 --> 00:03:34,315
e escolherei uma cor vermelha
ardente bonita.

70
00:03:34,985 --> 00:03:36,226
Ok.

71
00:03:37,115 --> 00:03:41,841
Assim como com a margem, podemos
especificar a borda para apenas um lado.

72
00:03:41,841 --> 00:03:46,551
Por exemplo, se quisermos uma
borda roxa grossa no topo,

73
00:03:46,551 --> 00:03:53,846
adicionamos uma outra propriedade:
"border-top: 10px solid purple;"

74
00:03:53,846 --> 00:03:54,735
Legal.

75
00:03:55,615 --> 00:03:58,293
Agora, vamos adicionar uma
moldura na imagem

76
00:03:58,293 --> 00:04:00,642
e brincar com os
estilos de borda.

77
00:04:01,192 --> 00:04:11,585
Então voltando para nosso "cute-cat",
digitamos: "border: 6px groove red;"

78
00:04:11,585 --> 00:04:15,203
Bom, não gostei do "groove",
vamos tentar "double".

79
00:04:15,203 --> 00:04:17,943
Eh... vamos tentar "ridge".

80
00:04:17,943 --> 00:04:20,073
Ah ha! Isso sim parece uma moldura.

81
00:04:20,853 --> 00:04:23,844
Ok, que tal uma borda, em 
volta de "oficial-info"?

82
00:04:24,544 --> 00:04:28,442
Vejamos, digite: "border". Não 
vamos fazê-la muito grande, 2px.

83
00:04:28,442 --> 00:04:34,141
Vamos tentar "dotted" e vamos
escolher um cinza sutil.

84
00:04:34,283 --> 00:04:36,976
Ah, em vez disso deixe-me
tentar "dashed" .

85
00:04:36,976 --> 00:04:38,796
Ok, isto é o que quero.

86
00:04:39,626 --> 00:04:42,421
Bom, com todas essas bordas, uma 
coisa está me incomodando um pouco.

87
00:04:42,421 --> 00:04:45,463
Na verdade, está me incomodando muito.

88
00:04:46,103 --> 00:04:50,836
Vê como o texto está posicionado
próximo à borda no "container"?

89
00:04:50,836 --> 00:04:54,443
E também está se intrometendo 
no texto dentro de "oficial-info"?

90
00:04:54,443 --> 00:04:56,350
Isso é uma aparência 
muito grosseira

91
00:04:56,350 --> 00:04:58,943
e torna difícil ler o texto.

92
00:04:58,943 --> 00:05:01,040
Aí é onde o enchimento entra.

93
00:05:01,040 --> 00:05:04,035
Toda vez que seus elementos tiverem
cores de fundo ou bordas,

94
00:05:04,035 --> 00:05:06,519
você quase sempre irá querer
adicionar um enchimento,

95
00:05:06,519 --> 00:05:08,725
para colocar um pouco de espaço
entre os conteúdos e as bordas.

96
00:05:09,475 --> 00:05:12,185
Vamos adicionar algum enchimento
ao "container".

97
00:05:12,245 --> 00:05:16,908
Vamos por 15px em
torno do "container".

98
00:05:16,908 --> 00:05:19,303
Oh, muito melhor.

99
00:05:19,303 --> 00:05:22,851
Vamos adicionar algum enchimento
à nossa "oficial-info".

100
00:05:22,851 --> 00:05:26,999
Desta forma: "padding: 6px;"
Oh, lindo!

101
00:05:27,539 --> 00:05:29,415
Não precisamos adicionar
enchimento na imagem,

102
00:05:29,415 --> 00:05:32,208
já que imagens tem boa aparência
dentro de molduras como esta.

103
00:05:33,108 --> 00:05:35,114
E aí está: o Modelo de Caixas.

104
00:05:35,114 --> 00:05:36,836
Margem, borda e enchimento.

105
00:05:36,836 --> 00:05:40,085
Eu usei valores grandes e cores brilhantes
para mostrá-los para você.

106
00:05:40,085 --> 00:05:42,770
Mas minha página parece um
pouco mais elegante agora.

107
00:05:42,770 --> 00:05:45,516
Se você quer que sua página
pareça suave e sofisticada,

108
00:05:45,516 --> 00:05:48,139
tente usar brancos e cinzas mais sutis.

109
00:05:48,139 --> 00:05:50,582
O que quer que faça, certifique-se
de usar estas propriedades,

110
00:05:50,582 --> 00:05:53,873
porque elas terão grande efeito 
sobre a aparência da sua página.

111
00:05:53,873 --> 00:05:55,365
Legendado por [Carlos A. N. C. R.] Revisado por [Alef Almeida].