1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <Meta charset="UTF-8"> 6 <Meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <Meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>CSS世界--代码实践--内联元素垂直 padding 的妙用</title> 9 <style> 10 h3 { 11 line-height: 30px; 12 font-size: 14px; 13 /* overflow: hidden; */ 14 } 15 16 h3>span { 17 padding-top: 58px; 18 } 19 20 </style> 21 </head> 22 23 <body> 24 <div class="container" style="width: 200px;height: 1000px;background: blanchedalmond;overflow: auto;"> 25 <a href="#hash">跳转</a> 26 </div> 27 <h3><span id="hash">标题</span></h3> 28 <div style="height: 1000px;"></div> 29 </body> 30 <script> 31 32 </script> 33 34 </html>实际上,对于非替换元素的内联元素,不仅 padding 不会加入行盒高度的计算,margin 和 border 也都是如此,都是不计算高度,但实际上在内联盒周围发生了渲染。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。