内联元素的盒模型

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             
 8         </script>
 9         
10     <style type="text/css">
11         span{
12             background-color: aqua;
13         }
14         .box1{
15             width: 100px;
16             height: 100px;
17             background-color: antiquewhite;
18         }
19         .s1{
20             /*
21             内容区、内边距、边框、外边距
22             内容区
23             
24            内联元素不能设置width和height
25            width: 100px;
26            height: 100px;
27            
28            内联元素可以设置水平方向的内边距
29            
30            内联元素可以设置垂直方向内边距，但是不会影响页面布局，水平方向会影响页面布局
31            
32            内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
33            
34            内联元素支持水平方向的外边距，水平外边距不会重叠，而是求和
35            
36            内联元素支持水平方向外边距，不支持垂直外边距在、
37            */
38           padding-left: 100px;
39           padding-right: 100px;
40           padding-bottom: 50px;
41           padding-top: 50px;
42           border: red 100px solid;
43           margin-left: 100px;
44           margin-right: 100px;
45          
46         }
47         .s2{
48             margin-left: 0px;
49         }
50     </style>
51        
52     </head>
53     <body>
54         <span class="s1">我是一个span元素</span>
55         <span class="s2">我是一个span元素</span>
56         <span>我是一个span元素</span>
57         <span>我是一个span元素</span>
58         
59         <div class="box1"></div>
60     </body>
61 </html>
内联元素的盒模型

猜你喜欢
