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 也都是如此，都是不计算高度，但实际上在内联盒周围发生了渲染。