CODEWITHSUNDEEP
htmlcssmargin
R3FL3CT
R3FL3CT

Reputation: 586

Why do I have ghost margins?

So, I'm making a chatting app, but for some reason, the first messages are appearing higher above the second message, and the second message is appearing too low. I've gone through Chrome Devtools to scour where these ghost margins could be coming from, but I can't find where it's occurred.

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>

Upvotes: 2

Views: 356

Answers (1)

j08691
j08691

Reputation: 208032

It's coming from the image. Set the vertical alignment on the image to something like top or middle:

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>

Upvotes: 4

Related Questions