Как удалить пробел тайны под элементом списка

Question

Я появляюсь в конце последнего элемента отступа. Из-за ссылки на то, что указано для изображения. И я не знаю, как это решить.

ul.ChatLog { 
 
    list-style: none; 
 
} 
 

 
.ChatLog { 
 
    height: 60px; 
 
    overflow: auto; 
 
} 
 

 
.ChatLog__entry { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: flex-start; 
 
    max-width: 100%; 
 
    margin: 0; 
 
    margin-bottom: 5px; 
 
} 
 

 
.ChatLog__entry:last-child { 
 
    margin-bottom: 0; 
 
} 
 

 
.ChatLog__avatar { 
 
    flex-shrink: 0; 
 
    flex-grow: 0; 
 
    z-index: 1; 
 
    height: 29px; 
 
    width: 29px; 
 
    border-radius: 3px; 
 
} 
 

 
.ChatLog__message { 
 
    flex: 1; 
 
    position: relative; 
 

 
    margin: 0 0 0 12px; 
 
    background-color: #000; 
 
    padding: 7px; 
 
    color: #fff; 
 
    font-size: 12px; 
 
} 
 

 
.ChatLog__message:before { 
 
    position: absolute; 
 
    right: auto; 
 
    top: .6em; 
 
    left: -12px; 
 
    height: 0; 
 
    content: ''; 
 
    border: 6px solid transparent; 
 
    border-right-color: #ddd; 
 
    z-index: 2; 
 
    
 
    }

  <ul class="ChatLog"> 
 
       <li class="ChatLog__entry"> 
 
        <div class="ChatLog__avatar"><a class="" href=""><img src="//placekitten.com/g/29/29" /></a></div> 
 
        <p class="ChatLog__message"> 
 
         Hello! 
 
         <time class="ChatLog__timestamp">6 minutes ago</time> 
 
        </p> 
 
       </li> 
 
       <li class="ChatLog__entry"> 
 
        <div class="ChatLog__avatar"><a class="" href=""><img src="//placekitten.com/g/29/29" /></a></div> 
 
        <p class="ChatLog__message"> 
 
         What is going on here? 
 
         <time class="ChatLog__timestamp">5 minutes ago</time> 
 
        </p> 
 
       </li> 
 
       <li class="ChatLog__entry"> 
 
        <div class="ChatLog__avatar"><a class="" href=""><img src="//placekitten.com/g/29/29" /></a></div> 
 
        <p class="ChatLog__message"> 
 
         I 
 
         <time class="ChatLog__timestamp">3 minutes ago</time> 
 
        </p> 
 
       </li> 
 
      </ul>

Я сделал скриншот, чтобы проиллюстрировать. link

Я был бы очень признателен за любые советы, спасибо!

Answer 1

Пространство внизу li фактически существует во всех категориях (.ChatLog__entry). Это заметно только на последнем, потому что для скрытия пространства нет элемента списка.

Пространство исходит от div.ChatLog__avatar. Он имеет height: 29px. Это немного выше, чем его родной брат p.ChatLog__message, который является высотой 28px.

сделать эту настройку:

.ChatLog__avatar { 
    flex-shrink: 0; 
    flex-grow: 0; 
    z-index: 1; 
    height: 28px; /* not 29px */ 
    width: 28px; /* not 29px */ 
    border-radius: 3px; 
} 

Answer 2

Этот код работает, как ожидалось, проверьте комментарии для объяснения. Я добавил несколько дополнительных записей, чтобы увидеть больше прокрутки ...

Flexbox имеет несколько особенностей, которые я не могу объяснить напрямую, один из них связан с округлением чисел при расчете минимальной/максимальной высоты/ширины. Не знаете, в чем причины, но ваша проблема решена путем помещения всех «__entry» в контейнер flexbox.

Я также удалил несколько избыточных правил гибкой связи, поскольку вам в основном требуется поведение по умолчанию по умолчанию.

/* { outline: 1px dashed red } /* use for debugging */ 
 

 
ul.ChatLog, 
 
li.Chatlog__entry { 
 
    list-style: none; padding: 0; margin: 0; 
 
} 
 

 
.ChatLog { 
 
    display: flex; /* Create main flex container */ 
 
    flex-direction: column; /* as column of multiple rows */ 
 
    max-height: 60px; /* maximum bounds for container */ 
 
    overflow: auto; 
 
} 
 

 
.ChatLog__entry { /* removed redundant flex defs, defaults work*/ 
 
    display: flex; /* as container for avatar and message */ 
 
    min-width: 100%; /* makes parent grow to full width */ 
 

 
    flex: 1;   /* as child of Chatlog, fill full row */ 
 
    margin-bottom: 5px; /* as you wanted => */ 
 
} 
 

 
time { padding-left: 10px } /* create a bit of distance...*/ 
 

 
.ChatLog__entry:last-child { 
 
    margin-bottom: 0; /* => but not on the last */ 
 
} 
 

 
.ChatLog__avatar > * { /* removed redundant flex defs, defaults work*/ 
 
    z-index: 1; 
 
    height: 29px; 
 
    width: 29px; 
 
    border-radius: 3px; 
 
} 
 

 
.ChatLog__message { 
 
    flex: 1; 
 
    position: relative; 
 

 
    margin: 0 0 0 12px; 
 
    background-color: #000; 
 
    padding: 7px; 
 
    color: #fff; 
 
    font-size: 12px; 
 
} 
 

 
.ChatLog__message:before { 
 
    position: absolute; 
 
    right: auto; 
 
    top: .8em; /* added .2em to center arrow */ 
 
    left: -12px; 
 
    height: 0; 
 
    content: ''; 
 
    border: 6px solid transparent; 
 
    border-right-color: #ddd; 
 
    z-index: 2; 
 
}

<ul class="ChatLog"> 
 

 
     <li class="ChatLog__entry"> 
 
      <div class="ChatLog__avatar"> 
 
       <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a> 
 
      </div> 
 
      <p class="ChatLog__message"> 
 
       Hello! 
 
       <time class="ChatLog__timestamp">6 minutes ago</time> 
 
      </p> 
 
     </li> 
 

 
     <li class="ChatLog__entry"> 
 
      <div class="ChatLog__avatar"> 
 
       <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a> 
 
      </div> 
 
      <p class="ChatLog__message"> 
 
       What is going on here? 
 
       <time class="ChatLog__timestamp">5 minutes ago</time> 
 
      </p> 
 
     </li> 
 

 
     <li class="ChatLog__entry"> 
 
      <div class="ChatLog__avatar"> 
 
       <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a> 
 
      </div> 
 
      <p class="ChatLog__message"> 
 
       I 
 
       <time class="ChatLog__timestamp">3 minutes ago</time> 
 
      </p> 
 
     </li> 
 

 
     <li class="ChatLog__entry"> 
 
      <div class="ChatLog__avatar"> 
 
       <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a> 
 
      </div> 
 
      <p class="ChatLog__message"> 
 
       Hello! 
 
       <time class="ChatLog__timestamp">6 minutes ago</time> 
 
      </p> 
 
     </li> 
 

 
     <li class="ChatLog__entry"> 
 
      <div class="ChatLog__avatar"> 
 
       <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a> 
 
      </div> 
 
      <p class="ChatLog__message"> 
 
       What is going on here? 
 
       <time class="ChatLog__timestamp">5 minutes ago</time> 
 
      </p> 
 
     </li> 
 

 
     <li class="ChatLog__entry"> 
 
      <div class="ChatLog__avatar"> 
 
       <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a> 
 
      </div> 
 
      <p class="ChatLog__message"> 
 
       I 
 
       <time class="ChatLog__timestamp">3 minutes ago</time> 
 
      </p> 
 
     </li> 
 
     <li class="ChatLog__entry"> 
 
      <div class="ChatLog__avatar"> 
 
       <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a> 
 
      </div> 
 
      <p class="ChatLog__message"> 
 
       Hello! 
 
       <time class="ChatLog__timestamp">6 minutes ago</time> 
 
      </p> 
 
     </li> 
 

 
     <li class="ChatLog__entry"> 
 
      <div class="ChatLog__avatar"> 
 
       <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a> 
 
      </div> 
 
      <p class="ChatLog__message"> 
 
       What is going on here? 
 
       <time class="ChatLog__timestamp">5 minutes ago</time> 
 
      </p> 
 
     </li> 
 

 
     <li class="ChatLog__entry"> 
 
      <div class="ChatLog__avatar"> 
 
       <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a> 
 
      </div> 
 
      <p class="ChatLog__message"> 
 
       I 
 
       <time class="ChatLog__timestamp">3 minutes ago</time> 
 
      </p> 
 
     </li> 
 
     <li class="ChatLog__entry"> 
 
      <div class="ChatLog__avatar"> 
 
       <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a> 
 
      </div> 
 
      <p class="ChatLog__message"> 
 
       Hello! 
 
       <time class="ChatLog__timestamp">6 minutes ago</time> 
 
      </p> 
 
     </li> 
 

 
     <li class="ChatLog__entry"> 
 
      <div class="ChatLog__avatar"> 
 
       <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a> 
 
      </div> 
 
      <p class="ChatLog__message"> 
 
       What is going on here? 
 
       <time class="ChatLog__timestamp">5 minutes ago</time> 
 
      </p> 
 
     </li> 
 

 
     <li class="ChatLog__entry"> 
 
      <div class="ChatLog__avatar"> 
 
       <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a> 
 
      </div> 
 
      <p class="ChatLog__message"> 
 
       I 
 
       <time class="ChatLog__timestamp">3 minutes ago</time> 
 
      </p> 
 
     </li> 
 
    </ul>