Quando utilizo a propriedade padding
, não gera o espaçamento correto nos quatro lados dos elementos. Ao utilizar o inspessor de elementos do Firefox observo que há uma sobreposição do efeito do padding
.
Veja:
HTML
<div class="quadrante-principal-conteudo-sub">
<span>Vitória</span><span>Vila Velha</span><span>Guarapari</span> <span>Anchieta</span>
</div>
CSS:
div.quadrante-principal-conteudo-sub{
width: 100%;
max-width: 595px;
padding: 10px;
font-size: 16px;
box-sizing: border-box;
}
div.quadrante-principal-conteudo-sub span{
padding: 20px;
font-size: 16px;
box-sizing: border-box;
overflow: auto;
}