CSS display:inline-block大小不精准问题解决

搭建个人博客的时候，使用公安局备案网站复制下来的代码，发现内容大小无法自由控制的问题。

我的个人博客网站

出问题代码：

<el-footer height="120px">
        <div style="width:300px;margin:0 auto; padding:20px 0; background-color:red">
          <p
            style="height:20px;line-height:20px;margin: 0px 0px 0px 0px; color:#939393;"
          >京ICP备19055038号</p>
        </div>
        <div
          style="width:300px;margin:0 auto; padding:20px 0; background-color:blue;overflow：hidden;"
        >
          <a
            target="_blank"
            href="rehttp://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011502003885"
            style="display:inline-block;text-decoration:none;margin:0 auto;"
          >
            <img src="../assets/record_icon.png" style="float:left;" />
            <p
              style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;"
            >京公网安备 11011502003885号</p>
          </a>
        </div>
      </el-footer>

运行效果：底部多处一块空间，原因是蓝色部分高度为66

解决问题后代码：

 <el-footer height="120px">
        <div style="width:300px;margin:0 auto; padding:20px 0; background-color:red">
          <p
            style="height:20px;line-height:20px;margin: 0px 0px 0px 0px; color:#939393;"
          >京ICP备19055038号</p>
        </div>
        <div
          style="width:300px;margin:0 auto; padding:20px 0; background-color:blue;overflow：hidden;line-height:0"
        >
          <a
            target="_blank"
            href="rehttp://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011502003885"
            style="display:inline-block;text-decoration:none;margin:0 auto;"
          >
            <img src="../assets/record_icon.png" style="float:left;" />
            <p
              style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;"
            >京公网安备 11011502003885号</p>
          </a>
        </div>
      </el-footer>

最终达到理想效果：

究其原因:

line-height属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

来源：CSDN

作者：楊帥

链接：https://blog.csdn.net/yangshuaionline/article/details/103525166