图像边距底部干扰行高答案

【问题标题】：image margin-bottom interferes with line height图像边距底部干扰行高
【发布时间】：2018-04-03 15:10:35
【问题描述】：

我想将图像左对齐并让文本在其周围浮动。这是我的基本代码：

<p>
  <img style="float: left; margin-right: 15px;margin-bottom:15px" src="/image/logo.png" alt=""
  width="307" height="63" />Here is the floating text..
</p>

问题是margin-bottom加起来剩余的line-height

你是怎么处理的？

编辑：我现在试过了

<img style="float: left; margin-right: 15px;margin-bottom:15px;height:4em" src="/image/logo.png" alt="" />

所以它正好有 4 行长，但那不起作用

【问题讨论】：

对于您编辑的部分，现在高度为 4 行 + 15px。所以尝试使用height: calc(4em - 15px);

标签： html css

【解决方案1】：

这解决了它：

<img style="float: left; margin-right: 1em;margin-bottom:1em;height:4em" src="/image/logo.png" alt="" />

或者如果修改了行高：

<p style="line-height:108%">
   <img style="float: left; margin-right: 1.08em;margin-bottom:1.08em;height:4.32em" src="/image/logo.png" alt="" />

【讨论】：