您的位置:首页> 实例代码> CSS实例

CSS 设置 span 元素 宽度与高度

2020-3-15 09:27| 作者: admin| 查看: 1429| 评论: 0|来自: 蚂蚁部落

width和height属性用来设置元素尺寸,但默认情况下对于span元素并不生效。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head> 
<meta charset=" utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
span {
  background-color:#ccc;
  width:100px;
  height:100px;
}
</style>
</head>
<body> 
  <span>蚂蚁部落</span>
</body> 
</html>

通过CSS代码设置span元素的宽高,代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/15/092601g2o9kbdv2vr222z2.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

因为这width和height属性只能对块级元素或者内联块级元素有效。

所以只要在代码中添加display:block或者display:inline-block即可解决此问题。

CSS代码修改如下:

[CSS] 纯文本查看 复制代码
span {
  background-color:#ccc;
  width:100px;
  height:100px;
  display:block;
}

上述代码可以实现设置span元素尺寸的效果。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部