How to remove mystery whitespace underneath list item

Question

I appear at the end of the last element of the indentation. Because of the reference to that specified for the image. And I do not know how to solve it.

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>

I made a screenshot to illustrate. link

I would be very grateful for any tips, thanks!

remove the margin-bottom: 5px; on Chatlog__entry – Jrey Oct 30 '15 at 02:47 — Jrey, Oct 30 '15 at 02:47

Michael Benjamin · Answer 1 · 2015-10-30T01:41:14.497

1

The space at the bottom of the li actually exists in all list items (.ChatLog__entry). It's only noticeable on the last one because there's no list item underneath to hide the space.

The space is coming from the div.ChatLog__avatar. It has a height: 29px. This is slightly higher than its sibling p.ChatLog__message which is height 28px.

Make this adjustment:

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

edited Oct 30 '15 at 01:41

answered Oct 30 '15 at 01:38

Michael Benjamin

346,931
104
581
701

And how to fix it? Can provide working code, I will be very grateful. Thanks! – user1432540 Oct 30 '15 at 01:40
Did not help, My problem is solved when I remove the , and with it comes the indentation – user1432540 Oct 30 '15 at 01:52
Here is an example indented: [link](http://codepen.io/anon/pen/jbKrpz) And without: [link](http://codepen.io/anon/pen/yYEJqq) In one there is the in the second there – user1432540 Oct 30 '15 at 02:10
You have a list item with two child elements. One child is 28px high. The other child (the avatar) is 29px high. So the list item (the container) will be 29px high. The 1px gap you see under the shorter child is the difference between 29-28. Once you make the avatar 28px high, both elements are the same height, and the gap is gone. – Michael Benjamin Oct 30 '15 at 02:17
Yes, when you remove the `` element that reduces the height of the avatar and the space also disappears. *But you also lose the anchor link (now you can't click on it anymore).* That isn't necessary. You don't need to change the HTML. You just need to adjust the heights in the CSS. – Michael Benjamin Oct 30 '15 at 02:17
I tried to configure it, the effect is the same. You can try to do it here? http://codepen.io/anon/pen/jbKrpz – user1432540 Oct 30 '15 at 02:19
This is not the same code from the question. And the problem is different. But here. It works: http://codepen.io/anon/pen/NGzreX – Michael Benjamin Oct 30 '15 at 02:26
To understand the reason for `font-size: 0` see my answer here: http://stackoverflow.com/a/31445364/3597276 – Michael Benjamin Oct 30 '15 at 02:31

Rene van der Lende · Answer 2 · 2015-10-30T03:29:27.823

This code works as expected, check comments for an explanation. I added a few extra entries to see more scrolling...

Flexbox has a few quirks I cannot directly explain, one of them has to do with rounding numbers when calculating min/max height/widths. Not sure what causes where, but your problem is solved by putting all '__entry's inside a flexbox container.

I also removed a few redundant flexbox rules as you mostly need the default flex behaviour.

/* { 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>

How to remove mystery whitespace underneath list item

2 Answers2