空间来自哪里，以及如何摆脱身份？

Question

两列，左侧是文字，右侧是图片。听起来不难，但IE 11插入4px的底部填充，我找不到它来自何处以及如何摆脱它。 Chrome，FF和Edge的行为符合预期（红色背景在文本或图像下方不可见）。 我试图为外部div设置一个200px的固定高度，这可以工作，但在真实的项目中不可用。

.gray-2-columns {
  background: red;
  column-count: 2;
}

.gray-2-columns .text {
  height: 200px;
  background: yellow;
}

.gray-2-columns img {
  vertical-align: top;
}

<div class="gray-2-columns">
  <div class="text">
    Text
  </div>
  <img width="300" height="200" alt="" src="http://via.placeholder.com/300x200?text=Red+line+below+here+in+IE" border="0">
</div>

Answer 1

img标记默认显示inline - 在img标记上使用display: inline-block;或display: block;。