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!
Qual é a diferença entre MARGIN e PADDING em CSS?
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.
MARGIN
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).
PADDING
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:
- I think we should increase the margin to create more space between the elements. (Eu acho que nós deveríamos aumentar a margem para criar mais espaço entre os elementos.)
- Padding ensures that content doesn't touch the edges of an element. (O padding garante que o conteúdo não toque nas bordas de um elemento.)
- These large margins are really affecting the layout. (Essas margens largas estão realmente afetando o layout.)
- Why don't we adjust the padding to test the responsiveness of the webpage? (Por que nós não ajustamos o padding para testar a responsividade da página web?)
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!