Overlapping elements with padding

Question

When I use the property padding, does not generate proper spacing on the four sides of the elements. By using the element inspector I notice that there is an overlap of the effect of padding.

Behold:

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

Answer 1

By default, the element span owns the property display with the value inline. Properties such as padding and margin do not function in elements inline.

To solve the problem, change the value of the property display for inline-block:

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