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 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>
内联元素
页面布局
垂直内边距 不影响
水平内边距 影响
边框 不影响
垂直外边距 不支持
水平外边距 影响 不会重叠而是求和