Tenho um elemento <p>
dentro de uma <div>
, dessa forma:
HTML
<div>
<p>texto</p>
</div>
CSS
div {
width: 30px;
height:30px;
background-color: green;
}
p {
width: 30px;
height:30px;
background-color: red;
margin: 10px 10px 10px 10px;
}
Quando eu aplico margin-left
funciona normalmente, o elemento <p>
se distancia 10px
da esquerda, porém quando eu aplico margin-top
, margin-bottom
ou margin-right
nada é alterado, o elemento <p>
permanece na mesma posição. Eu não entendi o por quê, alguém sabe explicar este comportamento ?