内联元素的盒模型的设置检验

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4                 <!--这是关于内联元素的盒模型的设置检验，改变style中的注释可以看到相应的结果-->
 5         <meta charset="UTF-8">
 6         <title></title>
 7     </head>
 8      <style type="text/css">
 9          span{
10              background-color: yellowgreen;
11          }
12          .p1{
13              width: 100px;
14              height: 100px;
15              background-color: brown;
16          }
17          .p2{
18              /*
19               * 内容区,无变化，所以内联元素不能设置width和height
20               */
21              /*width: 100px;
22              height: 100px;*/
23              
24              /*
25               * 边框,都可以设置，但是上下边框不会影响页面布局，只会直接覆盖掉，而水平方向的会影响页面布局
26               */
27              /*border-left: 100px solid black;
28              border-right: 10px solid black;
29              border-bottom: 100px solid black;
30              border-top: 10px solid black;*/
31              
32              /*
33               * 内边距,上下左右都可以设置，左右也可以影响页面布局，但是上下不会影响页面布局
34               * 并且左右的内边距不会重叠，而是会相加
35               */
36              /*padding-left: 10px;
37              padding-right: 10px;
38              padding-bottom: 100px;
39              padding-top: 10px;*/
40              
41              /*
42               * 外边距,内联元素可以设置左右外边距，但是不能设置上下外边距，并且左右外边距不会重叠，而是会相加
43               */
44              margin-left: 50px;
45              margin-right: 50px;
46              margin-bottom: 50px;
47              margin-top: 50px;
48          }
49          .p3{
50              /*padding-left: 20px;*/
51              margin-left: 50px;
52          }
53      </style>
54     <body>
55         <span class="p2">这是一个span语句</span>
56         <span class="p3">这是一个span语句</span>
57         <span>这是一个span语句</span>
58         
59         <div class="p1"></div>
60     </body>
61 </html>

这是关于内联元素的盒模型的设置检验，改变style中的注释可以看到相应的结果

内联元素的盒模型

盒模型：内容区，内边距，边框，外边距

内容区

内联元素不能设置width和height

内边距

内联元素可以设置水平方向的内边距

内联元素可以设置垂直方向的内边距，但是不会影响页面布局（会直接覆盖掉）

边框

内联元素可以设置边框，但是垂直边框不会影响页面布局，水平方向会影响

外边距

内联元素支持水平方向的外边距，水平方向的外边距不会重叠，而是求和

内联元素不支持垂直外边距

原文地址：https://www.cnblogs.com/xuanxuanya/p/11771790.html