WEBVTT

1
00:02.510 --> 00:05.900
Neste vídeo, falaremos sobre margem e
preenchimento.

2
00:05.900 --> 00:10.730
A margem refere-se ao espaço ao redor de
um elemento, como uma imagem, um texto e
um botão.

3
00:10.760 --> 00:18.410
Uma margem envolve essas partes do
conteúdo em todos os lados para ajudar a

4
00:18.410 --> 00:20.750
adicionar espaço na página e ajudar
diferentes elementos a capturar a atenção
do leitor.

5
00:20.780 --> 00:25.040
Padding é o espaço entre uma borda e o
elemento dentro dela.

6
00:25.070 --> 00:31.790
O preenchimento envolve o texto ou uma
imagem dentro de um determinado limite
para

7
00:31.790 --> 00:34.100
evitar que esse conteúdo toque a borda ou
a caixa ao redor dele.

8
00:34.130 --> 00:35.630
Voltemos ao nosso exemplo.

9
00:35.630 --> 00:36.140
Aqui.

10
00:36.140 --> 00:40.310
Dentro da coluna, especificamos o
preenchimento usando o modificador.

11
00:40.310 --> 00:45.440
Além disso, posso especificar a posição
exata do preenchimento.

12
00:45.440 --> 00:55.100
Por exemplo, aqui, dentro do modificador
dot padding, vou especificar o início
igual a 16 dpi.

13
00:55.130 --> 01:06.380
Isso adicionará 16 pixels independentes de
densidade dpi de margem

14
01:06.530 --> 01:07.760
no lado inicial, e você poderá adicionar
mais alguns preenchimentos.

15
01:07.760 --> 01:12.350
Por exemplo, a parte superior é igual a 20
dpi.

16
01:12.350 --> 01:18.200
Portanto, isso adicionará 20 dpi na parte
superior do elemento componível.

17
01:18.230 --> 01:26.290
Além disso, há um modificador de
preenchimento de pontos em tudo aqui se eu
especificar que tudo é igual a 20 dpi.

18
01:26.320 --> 01:31.210
Aqui você pode especificar o mesmo valor
para todos os lados.

19
01:31.210 --> 01:41.140
Além disso, você pode adicionar
horizontais iguais a 16 dpi,

20
01:41.140 --> 01:41.680
o que permite especificar as margens
horizontais e verticais.

21
01:41.680 --> 01:45.640
Por exemplo, vertical é igual a 26 dpi.

22
01:45.640 --> 01:51.070
Portanto, isso permitirá que você
especifique as margens horizontais e
verticais separadamente.

23
01:51.070 --> 01:59.290
As margens são essenciais para obter o
espaçamento e o alinhamento adequados nos
layouts

24
01:59.290 --> 02:02.440
da interface do usuário, garantindo uma
experiência de usuário visual, atraente e
consistente.

25
02:02.470 --> 02:06.940
Outra função interessante que podemos usar
aqui é a borda.

26
02:06.940 --> 02:11.290
Então, aqui dentro da coluna, vou usar a
borda.

27
02:11.320 --> 02:16.510
A função border é usada para adicionar uma
borda ao redor de um elemento componível.

28
02:16.510 --> 02:24.520
Essa função permite que você especifique a
aparência da borda, incluindo sua cor,
largura e forma.

29
02:24.520 --> 02:32.080
Vamos começar com a largura, como seis
dpi, e a cor, como ponto vermelho.

30
02:32.080 --> 02:41.620
Portanto, as margens, o preenchimento e as
bordas são essenciais para obter o
espaçamento e o alinhamento

31
02:41.620 --> 02:47.050
adequados nos layouts da interface do
usuário, garantindo uma experiência de
usuário visualmente atraente e
consistente.