我有以下代碼:

.header {
  background-color: red;
}

.content {
  background-color: blue;
}

em {   
  display: inline-block;
  background-color: yellow;
}
img {
  display: block;
}

<div class="header">
        <em>
          <img src="https://placehold.co/60x60"/>
        </em>
      </div>
    
      <div class="Content">
        Some content
      </div>

內(nèi)聯(lián)元素和內(nèi)聯(lián)塊都放在基線上。下面是j，y，g，q，p等字母的行內(nèi)下行空間。

您可以簡(jiǎn)單地使用垂直對(duì)齊將元素放置在底部，而不是基線

.header {
  background-color: red;
}

.content {
  background-color: blue;
}

em {   
  display: inline-block;
  background-color: yellow;
  vertical-align: bottom;
}
img {
  display: block;
}

<div class="header">
        <em>
          <img src="https://placehold.co/60x60"/>
        </em>
      </div>
    
      <div class="Content">
        Some content
      </div>