为什么没法设置span的宽度和高度

为什么没法设置span的宽度和高度:

很多刚开始学习div+css布局的时候可能会碰到这样的问题,使用CSS代码无法设置span的高度和宽度,尽管CSS代码没有错误,却无法生效。例如

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.mytest{
  width:200px;
  height:200px;
  border:1px solid red;
}
</style>
</head>
<body>
<span class="mytest">蚂蚁部落</span>
</body>
</html>

在以上代码中,设置的span元素的高度和宽度无法生效。这种现象的原因是,内联元素无法设置宽度和高度,如果要想设置宽度和高度,则必须首先转换成块级元素,方法是将内联元素的display属性值设置为block即可。 CSS代码修改如下:

width:200px;
height:200px;
display:block;
border:1px solid red;

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0519/1903.html

最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4708

时间: 2024-10-29 10:46:45

为什么没法设置span的宽度和高度的相关文章

动态设置图片的宽度和高度

动态设置图片控件的宽度和高度: imageView.getLayoutParams().width=600;imageView.getLayoutParams().height=400; 设置图片(src): imageView.setImageResource(resId); android获得屏幕高度和宽度: 1.WindowManager wm = (WindowManager) getContext()                     .getSystemService(Cont

如何设置span宽度

最近制作网站时发现给span设置宽度会无效,通过查阅CSS2标准中关于width 的定义发现,原来CSS中的 width 属性并不总是有效的,如果对象是 inline 对象,width 属性就会被忽略,Firefox 和 IE 是遵循CSS标准,因而直接设置span宽度会无效. 在span的CSS中增加display属性,将span设置为block类型的Element,这样宽度的确有效了,但把前后文字隔在不同行里面,这样其实span就完全变成了div. 例:span { background-c

有两种分别用&lt;bgsound&gt;和&lt;embed&gt;&lt;/embed&gt;标签,当用&lt;embed&gt;插入背景音乐时可以设置宽度和高度为0,隐藏播放器。

<bgsound>: <bgsound> 是用来插入背景音乐,但只适用于 ie,其参数设定不多.如下 <bgsound src="your.mid" autostart=true loop=infinite> src="your.mid"设定 midi 档案及路径,可以是相对或绝对.autostart=true是否在音乐档下载完之后就自动播放.true 是,false 否 (内定值).loop=infinite是否自动反复播放.l

select框宽度与高度设置(实用版)

在IE中只能使用 font-size: 限制 select 的高度. 同时使用 width:200px 限制宽度 size="20" 表示最多显示20个选项,超过20的需要拖动滚动条显示. multiple 表示 select 可多选 < select size="20" style="width:200px;font-size:12px" multiple> </select> select框宽度与高度设置(实用版)

如何给超链接设置宽度和高度

1.利用display:block属性 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <meta charset="utf-8" /> 5: <title>a设置宽度和高度</title> 6: <style> 7: .abc a{ 8: display:block; 9: width:130px; 10: height:30px; 11: border:1px s

怎样给超链接设置宽度和高度

1.利用display:block属性 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <meta charset="utf-8" /> 5: <title>a设置宽度和高度</title> 6: <style> 7: .abc a{ 8: display:block; 9: width:130px; 10: height:30px; 11: border:1px s

设置单元格的宽度和高度

NPOI官方网站:http://npoi.codeplex.com/ 在Excel中,单元格的宽度其实就是列的宽度,因为Excel假设这一列的单元格的宽度肯定一致.所以要设置单元格的宽度,我们就得从列的宽度下手,HSSFSheet有个方法叫SetColumnWidth,共有两个参数:一个是列的索引(从0开始),一个是宽度. 现在假设你要设置B列的宽度,就可以用下面的代码: HSSFWorkbook hssfworkbook = new HSSFWorkbook(); HSSFSheet shee

HTML连载39-外边距合并现象、盒子模型以及宽度和高度

一. 在默认布局的垂直方向上,默认情况下外边距是是不会叠加的,会出现合并现象,谁的外边距较大,就听谁的:但是在水平方向就不会出现这种状况,我们举个例子 span{ display: inline-block; width:100px; height:100px; border:1px solid red; } div{ width:100px; height:100px; border:1px solid green; } /*我们让span的两个盒子,相距100px*/ .hezi1{ mar

web前端入门到实战:外边距合并现象、盒子模型以及宽度和高度

一. 在默认布局的垂直方向上,默认情况下外边距是是不会叠加的,会出现合并现象,谁的外边距较大,就听谁的:但是在水平方向就不会出现这种状况,我们举个例子 span{ display: inline-block; width:100px; height:100px; border:1px solid red; } div{ width:100px; height:100px; border:1px solid green; } /*我们让span的两个盒子,相距100px*/ .hezi1{ mar