关于marginpadding 对内联元素的影响

Posted 2020-06-24 enmeen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于marginpadding 对内联元素的影响相关的知识，希望对你有一定的参考价值。

内联元素和块级元素的区别是新手必须要掌握的知识点。大家可能平时注意块级元素比较多。所以这里重点让我们来讲讲常见的width height margin padding 对inline元素的影响。

测试代码（在谷歌浏览器运行版本 49.0.2623.87 m，火狐效果同谷歌）

 1     <style type="text/css">
 2     * {
 3         margin: 0;
 4         padding: 0;
 5         
 6     }
 7     body{
 8         font-size: 12px;
 9         font-family: "微软雅黑";
10     }
11     span{
12         width:500px;
13         height: 500px;
14         border: 1px solid red;
15         background: yellow;
16         margin-top:10px;
17         margin-bottom: 10px;
18         margin-left:10px;
19         margin-right:10px;
20         padding-top:100px;
21         padding-bottom: 100px;
22         padding-left:10px;
23         padding-right:10px;
24         box-sizing:border-box;
25     }
26     div{
27         color:orange;
28         background: blue;
29         height: 100px;
30     }
31     </style>
32 </head>
33 
34 <body>
35     <div>蓝色区域的我是div 蓝色区域的我是div 蓝色区域的我是div</div>
36     <span>i am inline box</span>
37 </body>