Overlapping elements with padding

Question

Overlapping elements with padding

Navigation

#1 by (3 votes)

1

When I use the padding property, it does not generate the correct spacing on all four sides of the elements. When using Firefox's element of elements, I notice that there is an overlap of padding effect.

See:

HTML

<divclass="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;
}

css3

asked by anonymous 09.11.2017 / 10:13

1 answer

Date html with jquery Application of algorithms in OOP

score 3 · Accepted Answer

By default, the span element has the display property with the inline value. Properties like padding and margin do not work on inline elements.

To resolve the problem, change the value of the property display to inline-block :

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