<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta charset="utf-8"> <style type="text/css"> .box1{ width: 200px; height: 200px; border: 1px solid deeppink; background: pink; } .s1{ /* 内容区、内边距、边框、外边距 内联元素不能设置width和height（是没有作用的） */ height: 100px; width: 100px; /* 设置水平内边距，内联元素可以设置水平方向的边距，会影响布局，就是会挤其他的盒子 */ padding-left: 100px; padding-right: 100px; /* 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局，其他盒子不会被挤开，不会动。 */ /* 为元素设置边框 内联元素可以设置边框，但是垂直的边框不会影响到页面的布局 */ /* 水平外边距 内联元素支持水平方向的外边距，会影响布局 水平方向的外边距不会重叠，而是求和 内联元素不支持垂直外边距 */ } </style> </head> <body> <span class="s1">我是一个span</span> <span>我是一个span</span> <span>我是一个span</span> <span>我是一个span</span> <div class="box1"> </div> </body> </html>