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 也都是如此,都是不计算高度,但实际上在内联盒周围发生了渲染。  
上一篇:实验 2:Mininet 实验——拓扑的命令脚本生成


下一篇:基于氚云平台的应用开发学习(三)