Aplicar preenchimento a elementos filho está fazendo o filho desenhar sobre os limites do pai que o contém. Por favor, você pode explicar a consideração de tamanho na margem, preenchimento e largura de conteúdo.

se aumentarmos o preenchimento, por que os pais também não aumentam o tamanho acumulado de todos os filhos, considerando o tamanho de preenchimento dos filhos também.

http://jsfiddle.net/NkXUW/4/

 <div>
       <ul>
          <li><a>srikanth</a>
           </li>
           <li><a>sunkist</a>
        </li>
        <li><a>sunday</a>
        </li>
    </ul>
    </div>



div {
     margin-top:90px;
    margin-left:90px;
    background-color:#676896;
   }
   ul {
     list-style-type:none;
   }
    ul li {
    display:inline-block;
   }
   a {
    background-color:#c34567;
    padding:10px 10px 10px 10px;
   }

Quais são as práticas de codificação que precisamos considerar para ultrapassar este problema?

Ok pessoal eu tenho muitas respostas que funcionam. Alguém pode explicar o cálculo do tamanho dos pais com base nos elementos filhos. Quais são as características da criança que são consideradas ao calcular o tamanho do pai que engloba. quando todo o preenchimento é considerado quando não é considerado?