关于span元素的一些问题

最新推荐文章于 2024-04-12 10:30:24 发布

Medlen

最新推荐文章于 2024-04-12 10:30:24 发布

阅读量2.7k

点赞数 2

分类专栏： CSS 文章标签： html span css

本文链接：https://blog.csdn.net/weixin_38481963/article/details/79211390

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

关于span元素的一些测试

注：以下结论仅仅在Google浏览器中测试过

1、span元素可用position进行定位

2、span元素不适用宽高属性，对其设置宽高属性，不会有任何变化

3、span元素对margin属性仅适用于左右边距，上下不适用（设置上下边距不会有任何变化）

4、两个span元素之间默认有左右间距（Google浏览器测试间距为5px），因此在设计两个span元素之间的间距时应当考虑到他们之间的默认间距。

5、span元素设置padding属性时，元素本身的位置不变，其内填充向四周扩展。

span元素本身占据的空间只有文字部分占据的空间大小，通过padding属性进行扩展的空间不会与周围元素并列，span元素的背景层会覆盖span标签上方的元素内容及其背景层，仅仅只覆盖span标签下方元素的背景层，而不会覆盖其内容。

6、span元素的line-height属性仅仅改变span元素的上下方元素之间的距离，span元素本身并没有任何改变

7、span元素的border属性正常
8、span元素的outline属性正常

9、以下是测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> 
<title>span元素测试</title> 
<style>
	* {
		margin:0px;
		padding:0px;
	}

	body {
		background:yellow;
	}

	span {
		background:white;
		color:black;
	}

	.span1,.span2 {
		/*padding:26px;*/
		/*line-height:30px;*/
		border:3px black dotted;
		outline:10px red solid;
	}
	
	.top,.bottom {
		width:100%;
		height:30px;
		background:blue;
		padding:10px;
	}


	
</style>
<body>
	<div class="top">这是一个div元素块,用来分割span元素和浏览器顶部</div>
	<span class="span1">这是一个span元素块</span>
	<span class="span2">这是另一个span元素块</span>
	<div class="bottom">这是两个span元素下方的div元素块</div>
</body>
</html>

Medlen

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
关于span元素的一些问题

关于span元素的一些测试注：以下结论仅仅在Google浏览器中测试过1、span元素可用position进行定位2、span元素不适用宽高属性，对其设置宽高属性，不会有任何变化3、span元素对margin属性仅适用于左右边距，上下不适用（设置上下边距不会有任何变化）4、两个span元素之间默认有左右间距（Google浏览器测试间距为5px），因此在设计两个span元
复制链接

扫一扫