建一个网站迈年/重庆网站建设公司
搭建个人博客的时候，使用公安局备案网站复制下来的代码，发现内容大小无法自由控制的问题。
我的个人博客网站
出问题代码：
<el-footer height="120px"><div style="width:300px;margin:0 auto; padding:20px 0; background-color:red"><pstyle="height:20px;line-height:20px;margin: 0px 0px 0px 0px; color:#939393;">京ICP备19055038号</p></div><divstyle="width:300px;margin:0 auto; padding:20px 0; background-color:blue;overflow：hidden;"><atarget="_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;" /><pstyle="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"><pstyle="height:20px;line-height:20px;margin: 0px 0px 0px 0px; color:#939393;">京ICP备19055038号</p></div><divstyle="width:300px;margin:0 auto; padding:20px 0; background-color:blue;overflow：hidden;line-height:0"><atarget="_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;" /><pstyle="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 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。