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

通过设置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 也都是如此，都是不计算高度，但实际上在内联盒周围发生了渲染。
 
posted @ 2021-01-21 19:25  噔噔噔噔噔噔噔  阅读(34)  评论(0)  编辑  收藏  举报