CSS3 [Aula 8]: Border, Margin e Padding (Borda, Margem e Preenchimento)

Buenas! Nesta aula vamos conhecer e ver como utilizar Border, Margin e Padding.
Usamos Border para criar Bordas nos elementos HTML.
As Margens são usadas para ajustar o posicionamento externo dos elementos, afastando de outros elementos.
O Padding (Preenchimento) é bem semelhante às Margens, no entanto usa afastamento interno.
Na próxima aula vamos aprender sobre Box Model, Height e Width.
Até lá, abraço.
Prof. Marnei Cardoso

[@carolzagosofia]

Melhor explicação, o professor realmente tem didática em ensinar de uma forma clara e tranquila!

[@OCronico_]

eu te amo cara. sério valeu muito, eu não estava conseguindo alinhar, você me tirou de um tremendo tráfego

[@pinheeirolucas]

obrigado!! tava com dificuldade em entender suas diferenças na hora de aplicar!! mt obrigado

[@carlosguilhem]

Prof. Marnei, continue, por favor, na medida de suas possibilidades, os cursos de HTML e CSS3, pois sua didática e os audiovisuais são muito bons.

[@josenasartes]

Continuo a gostar muito abraço

[@BrunoMDI1]

gostei do seu jeito de ensinar

[@lucazassis2790]

Melhor vídeo aula que já encontrei aqui no KZbin.

[@A.bjunior]

Ótima explicação, ganhou um inscrito. Valeu !!

[@ramonjales9941]

muito obrigado pela vídeo aula!

[@roneipereira3508]

Seus videos apareceu no momento certo. Muito boa a sua didatica, parabéns mais um inscrito.

[@anaingridsantos7878]

esclareceu perfeitamente, obrigada!!

[@danielvasconcelosferreira384]

Excelente explicação parabéns continue assim, Deus te abençoe.

[@lurauedys1142]

Caramba, tirou muitas dúvidas que eu tinha! Muito obrigado pela ótima explicação!

[@LucasAraujo-xm9xm]

Excelente! Olhei alguns vídeos e não estava entendendo bem, porém, na sua explicação se tornou algo simples, parabéns pela explicação!!

[@andrekuratomi3880]

Muito bom! Simples, claro e objetivo. Parabéns e que continue!

[@franciscoetizel3158]

Muito bom o conteúdo! Sucesso e parabens pelo trabalho, ajudou muito!

[@andrelzpaino1820]

estava com dúvidas de posicioanmento, aqui foi bem claro 👍👍👍

Mais um vídeo com excelente didática!!! PARABÉNS!!

[@dalilacosta7883]

Parabéns pelo conteúdo, explicação excelente!!!

obg estava precisando dessa parte de padding para mover elemento dentro do border.. vlw

[@izaquefarias8275]

Explicação completa, simples, direta - obrigado!

[@portalispcursos]

me ajudou muito um vídeo tão simples mais que serve de muita ajuda, parabéns que Deus te abençoe sempre

[@ghust7564]

Vlwww. Ajudou dms

[@PedroHenrique-ow7ij]

Aula perfeita, parabéns muito bom mesmo, que Deus te abençoe grandemente

[@michelsrocha]

Ótima explicação, simples e eficiente. Agradecido!

[@cesarcomandulli]

Ótima didática e ritmo de ensino. Obrigado e parabéns!

[@andressa1163]

obrigadaaaa, finalmente entendendo isso 😅

[@josenasartes]

Gostei muito da forma como explica e quero aprender mais .Abraço

[@natanysantos5801]

me ajudou mto obrigada pelo conteudo de qualidade

[@FalaPequeno]

Excelente explicação amigo !!!

[@Matheus-mr4tl]

Cara vc tem algum curso? Vc explica muito bem. Eu tô fazendo um curso mas a explicação de lá foi tão confusa e a sua foi tão simples e clara. Parabéns

[@MarneiCardosoProf]

Ainda não tenho outros cursos (estão nos planos), apenas este de CSS básico e de HTML básico, disponíveis aqui no KZbin. Fico feliz que tenha gostado, abraço!

[@gabrielcarvalho2948]

exemplos 100%,mais um inscrito.

[@renanmacho]

aula muito bem explicada e muito didática

[@GESSICALUANASILVACAMPOS]

Incrível essa explicação!!! Simples e eficaz (:

[@raulhd2007]

Claro e Objetivo! É disso que eu to falando... Obrigado.

[@eletrotech51]

Muito bem bela explicação simples e direto. Na borda1 poderia deixar centralizada com padding 15px; assim centraliza o elemento no valor desejado tbm.. Deus o abençoe.

[@modohard1906]

Obrigado pela explicação 🤩 agora tudo faz sentido kkkk.

[@igormcruz9839]

Caraca, muito bom

[@Ravi4336]

olá professor, ótima didática. Mas fiquei com uma dúvida, se o padding está igual em todos os lados, o conteúdo não deveria ficar centralizado?

[@157decocaina]

explica mt bem, uma duvida isso serve pra colocar fotos, menu em um lugar desejado ou tem outro comando que faz esse parte?

[@MarneiCardosoProf]

Buenas, é o caminho, no entanto precisa de mais alguns detalhes para fazer tudo ficar como queremos. Recomendo acompanhar a playlist de Desenvolvimento Web, onde mostro vários exemplos de como utilizar isso e mais outras técnicas importantes. Abraço e bons estudos! kzbin.info/www/bejne/aqvbfXasiqx-qtU

[@ajudandooproximo7540]

Porque ao criar a borda1 no CSS você colocou um ponto na frente? Qual a lógica dessa ação e porque algumas palavras não levam ponto na frente?

[@MarneiCardosoProf]

O ponto é usado para determinar que é uma classe. Ex: .borda1 no CSS para criar a classe borda1. Depois chamamos a classe no HTML dentro de uma tag.

[@rubemrille3709]

com Border, Margin e Padding da pra montar a estrutura (onde os objetos ficam e tals) de um site certo? (setando os objetos como absolute) (só pra tirar uma duvida que não testei ainda)

[@emanuelnagima]

prof, consigo usar margin-left ou margin-right para mover textos e centralizar tbm? Estou com dificuldade e não estou conseguindo. Qual tag eu poderia utilizar?

[@MarneiCardosoProf]

Buenas, vamos imaginar uma div como uma caixa. Queremos afastar 20px esta caixa (div) da parede, então usamos margin: 20px; se for só na direita, usamos margin-right: 20px; e assim por diante. Agora temos um texto dentro desta caixa (div) e queremos que ele fique centralizado. Temos que adicionar o atributo class no HTML e colocar esta configuração no CSS, conforme exemplo. no HTML: Texto dentro da caixa no CSS criamos a configuração para a classe "texto": .texto { margin-right: 20px; text-align: center; }

[@davizeir.a]

Como ele deixou o ponteiro do mouse assim?

[@MarneiCardosoProf]

Também queria saber! Brincadeira, o esquema é substituir o cursor original pelo que tem o highlight em amarelo. Se quiser, avisa que deixo o arquivo disponível.

[@redefamatv]

a classe é o mesmo que uma div??

[@MarneiCardosoProf]

Buenas, não são a mesma coisa. Nas aulas 5 e 6 são mostradas as diferenças. Aula 5 - Classes: kzbin.info/www/bejne/j5iooWeHqZaBp6c Aula 6 - Divs: kzbin.info/www/bejne/mXOlmH6Oq6eSa5Y Abraço.