别再滥用 line-height 了

本文详细介绍了CSS中line-height属性的应用原则,包括其在块级元素和内联元素中的使用限制,以及为什么不应该为替换内联元素设置行高。

1) line-height 不能用在无 inline 元素的 block 元素内;

2) line-height "有继承性", 对 block 元素使用是设定内部 inline 元素的最小高度来的;

3) 不要给 "替换内联元素" 设置 line-height ,这是很不友好的行为(虽然 img 也算替换行内元素,但是给他设置没用,因为人家规范本来就不允许给替换内联元素加这玩意);

根据 MDN 上的 reference 总结,以后有的话还会加上.


<!doctype html> <html> <head> <meta charset="utf-8"> <title>周年贺卡</title> </head> <body> <table align="center" border="0" height="1200px" width="700px" background="http://photonj.photo.store.qq.com/psc?/V10BXA3B23yE7o/cX4Vyn98zHAGUajflo5h*GR.kC9ZMTx7iz.6cF0JYPwj4ENCZXFpLX2MAqD0bvlkiAMHA.ntW1l*r14zbNn.fA!!/b&bo=FQNhBBUDYQQRECc!&rf=mood_app" style="background-size: 100% 100%;"> <tr> <td height="20%"></td> </tr> <tr> <td height="70%"> <p align="center">亲爱的${NAME}:</p> <p align="center">您在${FIRST}年${SCEOND}月${THIRD}日入职</p> <p align="center">时至今日</p> <p align="center">${MESSAGE}</p> <center> <svg t="1656659495372" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2293" width="32" height="32"> <path d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z" fill="#E5404F" p-id="2294" data-spm-anchor-id="a313x.7781069.0.i0"></path> </svg> </center> <br> <br> <p align="right" style="margin-right: 30px;"> XXXX&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp </p> </td> </tr> <tr> <td height="10%"></td> </tr> </table> </body> </html>
最新发布
08-28
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值