Hello, there! Se você está aprendendo a programar em CSS, provavelmente já encontrou os termos margin e padding, e talvez tenha ficado em dúvida de como eles funcionam.
Embora ambos afetem o espaço ao redor de um elemento, eles têm propósitos diferentes e são aplicados de maneiras distintas. Então hoje você vai aprender exatamente qual é a diferença entre margin e padding e como você pode aplicá-los de maneira eficaz em seus projetos. Let's go!
Margin e padding são duas propriedades CSS que controlam o espaçamento ao redor de um elemento HTML, mas eles afetam o layout de maneiras diferentes. A principal diferença entre margin e padding é onde o espaço é aplicado.
A palavra margin significa margem em inglês, e portanto ela vai definir qual é a margem de espaço entre um elemento e todos os seus elementos vizinhos.
Para ficar mais fácil de entender, imagine um retângulo: tudo o que estiver do lado de fora, em volta desse retângulo, vai ficar a uma distância que será definida pela propriedade margin. Então se você definir uma margem de 20 pixels para esse retângulo, haverá um espaço de 20 pixels entre a borda do retângulo e seus elementos vizinhos (todos do lado de fora, isso é importante).
Já a propriedade padding se refere ao espaço do lado de dentro do elemento.
Voltando ao exemplo do retângulo, imagine que temos um texto qualquer dentro desse retângulo. Quando definimos o padding, estamos definindo o espaçamento que esse texto ficará das bordas do retângulo.
Lembre-se que a palavra "padding" em inglês significa "enchimento", então é como se você estivesse colocando um enchimento das bordas do seu elemento para dentro.
Resumindo, enquanto margin controla o espaço entre um determinado elemento e tudo o que estiver em volta dele, padding controla o espaçamento entre um elemento e o seu conteúdo interno.
Now let's take a look at some examples to practice your English:
Do you always adjust the margin and the padding in your layouts? (Você sempre ajusta a margem e o padding nos seus layouts?)
Continue estudando com a gente no nosso artigo "O que é a matriz RACI?". See you!
Aproveite e faça nosso teste de nível de inglês. Ou baixe nossa apostila que te ensina como aprender inglês de maneira eficiente!
Quer realmente aprender outras línguas, como inglês e espanhol? Conheça os nossos cursos que reforçam o aprendizado de inglês e espanhol.
