设置border的长度

1、打开visual studio code开发工具，新建一个文件，保存为html文件格式，然后，在文件中输入一个感叹号，再按一下Tab键，就会快速创建H5格式的html文档结构

2、在页面上添加一个span标签，span标签是行内元素，内容多宽就占用多宽，默认不会像div一样占用一整行，此时还未添加border

3、在浏览器中打开这个页面文件，就可以看到运行效果，界面只有几个文字，没有边框

4、接下来，给span标签添加下边框，在span标签中添加 style="border-bottom:solid 1px red;"

5、在浏览器中打开后就可以看到，页面文字下面有了下边框，而且文字有多长，边框就有多长

6、那么，假设只想给border加下边框， 该怎么处理呢？将border包裹一层span标签，并将外面span的样式移到内部span即可

7、再次在浏览器运行，就可以看到，只有border文字有了下边框，其他文字没有了边框。因为bor蟠校盯昂der不能设置长度，但是可以设置dom元素的长度来达到设置border长度的效果