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
内边距
内联元素可以设置水平方向的内边距
内联元素可以设置垂直方向的内边距,但是不会影响页面布局(会直接覆盖掉)
边框
内联元素可以设置边框,但是垂直边框不会影响页面布局,水平方向会影响
外边距
内联元素支持水平方向的外边距,水平方向的外边距不会重叠,而是求和
内联元素不支持垂直外边距