微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

CSS世界--代码实践--内联元素垂直 padding 的妙用

 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 举报,一经查实,本站将立刻删除。