Margem
Margem
Margem é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 1 de 1. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML for Kids, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML for Kids inclui 1 aulas no total.
Introdução
Margin é um dos tópicos mais importantes do CSS.
As margens são os espaços que criamos ao redor dos limites de um elemento.
Explicação dos lados da margem
Independentemente do tipo de elemento, ao criar uma margem, não devemos pensar nela como algo de 4 lados (superior, direito, inferior e esquerdo).
<style>
.box{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
width:100px;
height:100px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
<div class="box">Box with margin</div>Aviso
Assim como atribuímos um valor específico à margem, também podemos atribuir um valor percentual.
Aviso
Assim como atribuímos um valor específico à margem, também podemos atribuir um valor percentual.
Atalho para margin
No exemplo anterior, tivemos de escrever 4 linhas de código para definir a margem de todos os lados de uma caixa.
O CSS fornece um atalho para margin, permitindo escrever um código mais curto.
Depois de definir a propriedade margin, podemos atribuir os valores das margens separando-os por espaços, respectivamente para o lado superior, direito, inferior e esquerdo (ou seja, no sentido horário).
<style>
.box {
margin: 10px 10px 10px 10px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
Aviso sobre margem negativa
As margens podem receber um valor negativo. Os preenchimentos que veremos na próxima lição não podem receber um valor negativo.
margin auto
Usaremos o valor auto da propriedade margin para centralizar nossos elementos horizontalmente. Independentemente da resolução da tela, o elemento ficará centralizado na horizontal.
Suponhamos que a tela tenha 1200px e nosso elemento tenha 400px. O elemento ficará centralizado, com espaços de 400px à esquerda e à direita.
<style>
.box {
width:200px;
margin: auto;
background-color: powderblue;
}
</style>
<div class="box">
This element will be horizontally
centered because
it has margin: auto;
</div>Parabéns
Parabéns 🎉
Nesta seção, aprendemos as margens do CSS.
Na próxima seção, aprenderemos os preenchimentos do CSS.
Perguntas Frequentes
A aula “Margem” é grátis?
Sim — o texto completo de “Margem” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML for Kids, atualize para CoddyKit PRO. O curso de HTML for Kids inclui 1 aulas no total.
O que vou aprender em “Margem”?
Margem Você pratica HTML for Kids com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML for Kids?
Nenhuma experiência prévia é necessária. HTML for Kids no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 1.
Quanto tempo leva a aula “Margem”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML for Kids?
Sim. Cada aula de HTML for Kids inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.