当CSS相同时，为什么这些div的大小不同？

Question

我在主要内部有一个div（.soundLogoContainer＆＃34;）和一个旁边（＆＃34; .iAmSam＆＃34;）。 2个子元素共享非常相似的CSS，唯一的区别是一个是浮动左边而另一个是浮动右边。现在我正在使用内联块。

然而，根据Dreamweaver和我的浏览器，.soundLogoContainer div和.iAmSam旁边仍然是偏移的。我希望灰色div相对位于前0（与黄色div位于标题下方没有间隙的方式相同）。

我不明白为什么会这样，并希望解决它。

任何帮助，我都会非常感激。

       <main>

  <aside class="iAmSam columnDiv">
    <p>aside iAmSam columnDiv</p>
  </aside>

  <div class="soundLogoContainer columnDiv">
    <p>div "soundLogoContainer columnDiv </p>
  </div>

  <div class="homeSkillContainer">div</div>

</main>

    body main {
    background-color: skyblue;
}

.columnDiv {
    display: inline-block;
    width: 50%;
    height: 200px;
}

.soundLogoContainer {
    background-color: grey;
}


.iAmSam {
    background-color: yellow;
}

Answer 1

CSS属性height不同。一个有150px，另一个有200px。

此外，内容<img>更改外部元素大小。尝试删除<img>并检查两者是否具有相同的大小。

为了更有帮助，您可以向同一个元素添加多个类。尝试使用共享属性创建一个类：

<main>
  <aside class="box iAmSam">aside<img class="imgtextIMAKE" src="../assets/Text/iamsam.svg" alt="I am Sam"/></aside>

  <div class="box soundLogoContainer">div</div>
  <div class="homeSkillContainer">div</div>
</main>

.soundLogoContainer {
    background-color: grey;
    height: 150px;
    float: left;
}

.iAmSam {
    background-color: yellow;
    height: 200px;
    float: right;
}

.box {
    position: relative;
    width: 50%;
    top: 0px;
}