Css 为什么我的图像高度不适合父div？

我很难在CSS中定位东西。我理解填充、边距、高度和宽度，对我来说，这些似乎足以组织嵌套的div框，但不幸的是，这对我来说似乎并不那么容易

无论如何，在我下面的示例中，配置文件图片比它包含的实际div大

我做错了什么

CSS HTML

---

您的个人资料图片是40x40，最近的定位父项是.mail，也是40px。配置文件pics的直接父级.leftprofileimage没有显式定位，因此这可能是混淆的地方。此代码笔只是将规则添加到.leftprofileimage，使其成为profile pic符合的元素：

---

你想干什么？

.mailcontainer{
    top: 40px;
    width:600px;
    height: 100%;
    width: auto;
    position: relative;
    background-color:green;
}


.mail {
  margin: 5px auto;
  width: 700px;
  height: 40px;
  z-index: 100px;
  overflow: hidden;
  background-color: #d3d3d3;
  position: relative;
  border-radius: 6px;
}

.leftprofileimage img {
  float: left;
  max-height: 100%;
  width: auto;
  position: absolute;
  border-radius: 90px;
}

.snippet {
  float: right;
  top: 10px;
  width: 55%;
  margin-left:26%;
  position: absolute;
}

.sendername {
    font-size: 1.0em;
    width: 26%;
    padding: 9px 0;
    margin-left: 15%;
    position: absolute;
  }

 <div class="mailcontainer">
    <div class="mail">
      <div class="leftprofileimage"><img src="https://s3.amazonaws.com/BodegaMagazine/StaffPhotos/Small/eric-small-profile-photo.jpeg" alt="" /></div>
      <div class="sendername"><a href="/">Jeff
      </a></div>
      <div class="snippet">
      Hello this is a test message</div>
      <div class="delete"><p>DELETE</p></div>
    </div>
    <div class="mail">
      <div class="leftprofileimage"><img src="https://s3.amazonaws.com/BodegaMagazine/StaffPhotos/Small/eric-small-profile-photo.jpeg" alt="" /></div>
      <div class="sendername"><a href="/">Jeff
      </a></div>
      <div class="snippet">
      Hello this is a test message</div>
      <div class="delete"><p>DELETE</p></div>
    </div>