Tenho uma situação em que defino o padding
de uma div
dentro do header
com:
#header_inn{
padding: 5px 2%;
width: 96%;
}
Eu quero que os padding
s top
e bottom
tenham exatos 5px
, porém o de baixo fica maior, diferente em relação ao de cima, que está com os 5px
, mas o de baixo ficou com o dobro, 10px
(medido no Photoshop).
Veja:
Por que o padding
de baixo fica maior? O que estou fazendo de errado ou deixando de fazer para gerar esse espaço indesejado e impreciso?
Segue o código:
body{
margin: 0;
background-color: #000;
font-size: 20px;
color: #fff;
}
header{
background-color: #51090e;
border-bottom: 1px solid #7e0e16;
}
footer{
background: green;
}
#header_inn{
padding: 5px 2%;
width: 96%;
}
#header_inn img{
height: 53px;
}
<header>
<div id="header_inn">
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
</div>
</header>
<main>
main
</main>
<footer>
footer
</footer>
transition
vc pode brincar um pouco com o cubic-bezier.com para ver se vc chega em um resultado que te atende. Se não te atender e vc precisa exatamente de tempo X para ir e tempo 2X para voltar acho que usando dois @kayframes um no :hover e outro quando tirar o :hover pode ser que vc consiga, mas ai tem que testar pq nunca fiz exatamente assim.