1

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:

inserir a descrição da imagem aqui

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;
}

1 Resposta 1

3

Por padrão, o elemento span possui a propriedade display com o valor inline. Propriedades como padding e margin não funcionam em elementos inline.

Para resolver o problema, mude o valor da propriedade display para inline-block:

div.quadrante-principal-conteudo-sub span{
    display: inline-block;
    padding: 20px; 
    font-size: 16px; 
    box-sizing: border-box; 
    overflow: auto; 
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .