为什么仅在.info处于活动状态时才应用边距

Question

为什么只有在.info处于活动状态时，两个列表之间的50px边距才会出现？这个差距应该总是在那里，一旦选择数字1-8，文本应该出现在间隙内。所有建议都欢迎。

// Get references to the two sets of boxes 
 
var numbers = document.querySelectorAll(".click"); 
 
var letters = document.querySelectorAll(".border"); 
 

 
// Turn each node list into proper arrays: 
 
numbers = Array.prototype.slice.call(numbers); 
 
letters = Array.prototype.slice.call(letters); 
 

 
// Loop through all the number boxes 
 
numbers.forEach(function(box, index){ 
 

 
    // Set up the click event handlers for all the number boxes 
 
    box.addEventListener("click", function(){ 
 
    
 
    // Remove borders from each of the letter boxes 
 
    letters.forEach(function(box){ 
 
     box.classList.remove("showBorder"); 
 
    }); 
 
     
 
    // Apply the border to only the one clicked element 
 
    var info = document.getElementsByClassName('info')[0]; 
 
    
 
    info.style.display = 'inline'; 
 
    letters[index].classList.add("showBorder"); 
 
    }); 
 
    
 
});

.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;} 
 
.list-box {margin:50px auto;padding:0;} 
 
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;} 
 
.box-sleeve {margin:50px auto;padding:0;} 
 
.showBorder { border: 3px dashed black; } 
 
.info {margin:auto; position: relative;padding-left:3em;display:none}

    <ul class="list-box"> 
 
         <li class="click">1</li> 
 
         <li class="click">2</li> 
 
         <li class="click">3</li> 
 
         <li class="click">4</li> 
 
         <li class="click">5</li> 
 
         <li class="click">6</li> 
 
         <li class="click">7</li> 
 
         <li class="click">8</li> 
 
        </ul> 
 
       <div class="info">Regular length for your collar size</div> 
 
        <ul class="box-sleeve"> 
 
         <li class="border">a</li> 
 
         <li class="border">b</li> 
 
         <li class="border">c</li> 
 
         <li class="border">d</li> 
 
         <li class="border">e</li> 
 
         <li class="border">f</li> 
 
         <li class="border">g</li> 
 
         <li class="border">h</li> 
 
        </ul> 
 
      

Answer 1

// Get references to the two sets of boxes 
 
var numbers = document.querySelectorAll(".click"); 
 
var letters = document.querySelectorAll(".border"); 
 

 
// Turn each node list into proper arrays: 
 
numbers = Array.prototype.slice.call(numbers); 
 
letters = Array.prototype.slice.call(letters); 
 

 
// Loop through all the number boxes 
 
numbers.forEach(function(box, index){ 
 

 
    // Set up the click event handlers for all the number boxes 
 
    box.addEventListener("click", function(){ 
 
    
 
    // Remove borders from each of the letter boxes 
 
    letters.forEach(function(box){ 
 
     box.classList.remove("showBorder"); 
 
    }); 
 
     
 
    // Apply the border to only the one clicked element 
 
    var info = document.getElementsByClassName('info')[0]; 
 
    
 
    info.style.visibility = 'visible'; 
 
    letters[index].classList.add("showBorder"); 
 
    }); 
 
    
 
});

.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;} 
 
.list-box {margin:50px auto;padding:0;} 
 
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;} 
 
.box-sleeve {margin:50px auto;padding:0;} 
 
.showBorder { border: 3px dashed black; } 
 
.info {margin:auto; position: relative;padding-left:3em; visibility: hidden;}

<ul class="list-box"> 
 
         <li class="click">1</li> 
 
         <li class="click">2</li> 
 
         <li class="click">3</li> 
 
         <li class="click">4</li> 
 
         <li class="click">5</li> 
 
         <li class="click">6</li> 
 
         <li class="click">7</li> 
 
         <li class="click">8</li> 
 
        </ul> 
 
       <div class="info">Regular length for your collar size</div> 
 
        <ul class="box-sleeve"> 
 
         <li class="border">a</li> 
 
         <li class="border">b</li> 
 
         <li class="border">c</li> 
 
         <li class="border">d</li> 
 
         <li class="border">e</li> 
 
         <li class="border">f</li> 
 
         <li class="border">g</li> 
 
         <li class="border">h</li> 
 
        </ul>

而不是display:none

摆脱display

和INC路得

visibility:hidden

当调用点击设置visibility:visible的信息元素。