为什么我有幽灵边距？

Question

所以，我正在制作一个聊天应用程序，但由于某种原因，第一条消息显示在第二条消息之上，而第二条消息显得太低。我已经通过 Chrome Devtools 搜索了这些幽灵边缘可能来自哪里，但我找不到它发生在哪里。

ul{
  list-style: none;
  margin: 0;
  padding: 0;
  width:70%;
  min-width: 560px;
}

ul li{
  display:inline-block;
  clear: both;
  padding: 20px;
  border-radius: 30px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  max-width:150px;
  word-wrap: break-word;
}

.message:not([class*="self"]){
  background: #eee;
  float: left;
  position: relative;
  left: 60px;
}
.message.self{
  float: right;
  background: #2ea44f;
  color: #fff;
}

.self.middle{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.self.end{
  border-top-right-radius: 5px;
}
.self.start{
  border-bottom-right-radius:5px;
}

.message:not([class*="self"]).middle{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.message:not([class*="self"]).start{
  border-bottom-left-radius: 5px;
}
.message:not([class*="self"]).end{
  border-top-left-radius: 5px;
}
.msgBlock{
  margin-top:10px;
  margin-bottom:10px;
  width:100%;
}
.msgBlock:not([class*="selfBlock"]){
  float: left;
}
.msgBlock.selfBlock{
  float: right;
}
.pfp{
  width: 60px;
  position: relative;
  left: -135px;
  border-radius: 50%;
}

<ul id="chat"><div class="msgBlock selfBlock"><li class="message self start">Hi guys!</li><li class="message self middle">Hope this works!</li><li class="message self end">what's going on</li></div><div class="msgBlock"><img src="https://lh6.googleusercontent.com/-BPIa4VYnvn0/AAAAAAAAAAI/AAAAAAAABWM/vLhYpyzOwB0NW8expqNpcZnYxuyMBAykQCLcDEAE/s256-c-k-no-mo/photo.jpg" class="pfp"><li class="message start">It does work!</li><li class="message middle">At least i think so</li><li class="message end">So far it looks good</li></div></ul>

Answer 1

它来自图​​像。将图像上的垂直对齐设置为顶部或中间：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 70%;
  min-width: 560px;
}

ul li {
  display: inline-block;
  clear: both;
  padding: 20px;
  border-radius: 30px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  max-width: 150px;
  word-wrap: break-word;
}

.message:not([class*="self"]) {
  background: #eee;
  float: left;
  position: relative;
  left: 60px;
}

.message.self {
  float: right;
  background: #2ea44f;
  color: #fff;
}

.self.middle {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.self.end {
  border-top-right-radius: 5px;
}

.self.start {
  border-bottom-right-radius: 5px;
}

.message:not([class*="self"]).middle {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.message:not([class*="self"]).start {
  border-bottom-left-radius: 5px;
}

.message:not([class*="self"]).end {
  border-top-left-radius: 5px;
}

.msgBlock {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
}

.msgBlock:not([class*="selfBlock"]) {
  float: left;
}

.msgBlock.selfBlock {
  float: right;
}

.pfp {
  width: 60px;
  position: relative;
  left: -135px;
  border-radius: 50%;
  vertical-align:top;
}

<ul id="chat">
  <div class="msgBlock selfBlock">
    <li class="message self start">Hi guys!</li>
    <li class="message self middle">Hope this works!</li>
    <li class="message self end">what's going on</li>
  </div>
  <div class="msgBlock"><img src="https://lh6.googleusercontent.com/-BPIa4VYnvn0/AAAAAAAAAAI/AAAAAAAABWM/vLhYpyzOwB0NW8expqNpcZnYxuyMBAykQCLcDEAE/s256-c-k-no-mo/photo.jpg" class="pfp">
    <li class="message start">It does work!</li>
    <li class="message middle">At least i think so</li>
    <li class="message end">So far it looks good</li>
  </div>
</ul>