Modelo de Caixa | Tutorial de CSS | #11 | #uninerds | Universo dos Nerds
3Mais informações:
http://www.uninerds.net/?locale=pt_BR#!html-css-e-javascript/tutorial-de-css
Bloco e Linha: https://youtu.be/oc8dIh1zCnU
Largura e Altura: https://youtu.be/Yofb4DCAOh0
Borda:
Parte 1: https://youtu.be/DF5gkTI7Ue0
Parte 2: https://youtu.be/BP03Ut_GvNs
Preenchimento: https://youtu.be/x9eWtRoRWw4
Margem: https://youtu.be/ZtySnGWVF6g
Redes Sociais
Facebook: https://www.facebook.com/uninerds
Twitter: https://www.twitter.com/uninerds
YouTube: https://www.youtube.com/user/uninerds?sub_confirmation=1
LinkedIn: https://www.linkedin.com/company/uninerds
Instagram: https://www.instagram.com/uninerds
Gostou do vídeo? Veja 10 opções de como você pode apoiar o Universo dos Nerds:
https://youtu.be/KYAljlRtlb4
Grupo recomendado no vídeo:
https://www.facebook.com/groups/DevAt
Hashtags: #uninerds #css
Afiliado: http://www.cursos24horas.com.br/parceiro.asp?cod=promocao131331
Contato: uninerds@uninerds.net
Quando vamos colocar os elementos em uma página para montar o layout devemos entender esse conceito, porque o tamanho dos elementos não são definidos apenas pela largura e altura, mas também envolve a margem, borda e preenchimento como podemos ver na imagem:
Exemplo: Se definirmos que uma div terá o tamanho de 300x250 e definimos a margem 18x8, a borda 3x3 e o preenchimento 5x5 o tamanho real dessa div será 352x282, porque será 300(largura)+18(margem esquerda)+3(borda esquerda)+5(preenchimento esquerdo)+18(margem direita)+3(borda direita)+5(preenchimento direito)x250(altura)+8(margem supeior)+3(borda superior)+5(preenchimento superior)+8(margem inferior)+3(borda inferior)+5(preenchimento inferior)
Cuidado: Não esqueça que as margens superior e inferior não somam, elas se sobrepõem valendo assim o maior valor