padding различается для 2 списков с одинаковым количеством элементов с одним и тем же именем класса

Question

Я создал 2 списка и вставил элементы в них с помощью JS. Они оба имеют одно и то же имя класса, однако, когда я устанавливаю заполнение, элементы списка имеют разные результаты. здесь скрипка с моим кодом https://jsfiddle.net/ums1ptL9/1/

HTML

<main> 
    <section class="section" id="top"> 
     <h4>Contacts</h4> 
    </section> 

    <section class="section" id="mid"> 
     <ul id="contacts"></ul> 
     <ul id="contactinfo"></ul> 
    </section> 

    <section class="section" id="bottom"> 
     <select id="dropdown"> 
      <option value="email">Email</option> 
      <option value="number">Phone Number</option> 
     </select> 
    </section> 
</main> 

JS

$('#contacts').append('<li class="itemname" id="'+i+'"><a href="#">' + contactarray[i].name + '</a></li>'); 
    $('#contactinfo').append('<li class="itemname">' + contactarray[i][$('#dropdown').val()] + '</li>'); 

CSS

.itemname { 
    padding: 11% 0 11% 0; 
    border: 1px solid rgb(19, 19, 19); 
} 

пожалуйста, смотрите на скрипке для полного кода

Answer 1

Процентного соотношения для padding-top и padding-bottom основаны от ширины вмещающего блочного уровня элемента: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top

Так, так как нет равного Явного ширина устанавливается на контактах и ​​CONTACTINFO и содержание в каждом списке имеет различную естественную ширину, то padding имеет другое вычисленное значение.