请选择进入手机版 | 继续访问电脑版

设为首页收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 地图任务 - 给官方提建议

论坛活动及任务 归纳网站最新活动更新邮件保护帐号安全 第一季积分兑换活动 - 12周年上海聚会照片

万元奖励等你拿——点点网模板设计大赛 畅销译文征名——让最火的畅销书，印上你的标签 联系招聘客服蓝色理想帮你找工作！

经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › [解决.答案在33#]为什么在css中设了body的属性 span就会 ...

发新帖

查看: 2524|回复: 43

[求助] [解决.答案在33#]为什么在css中设了body的属性 span就会失效 [复制链接]

ayan2006　楼主

帖子: 618
体力: 5405
威望: 0

发表于 2009-2-18 10:25:25 |显示全部楼层

==2008-2-18=提问=========================================

问题..........................................................................
为什么在css中设了body的margin:0; padding:0; 后
span 标记中padding就会失效?．．这是为什么？

问题．．以下运行的效果中．．为什么最终span的上边距会是0px，而不是22px?<br>
左边距，右边距好像是22px，
可上边距和下边距为什么不为22px?

说明一下，我不是要转成block，我只是想知道原因．．为什么最终span的上边距会是0px，而不是22px?．．<br>

==2008-2-19=问题基本解决的说明=========================================

2008-2-19 帖子修改问题已基本解决：答案见33楼whiteleaf 同学的回答．．
（注意.我不是要将例子中span标记转成块级元素.我只是在弄明白.这个例子中span的上边距(下边距)为什么不是css中span定义的22px.）
最后．感谢各位GGMM们的积极回答与捧场．．．．　

==2008-2-18=问题中所提及的代码=========================================

提示：您可以先修改部分代码再运行

[ 本帖最后由 ayan2006 于 2009-2-19 09:38 编辑 ]

http://t.qq.com

西部数码顶级域名注册商39元抢注！

使用道具举报

聪明的一休

中级会员 

帖子: 140
体力: 469
威望: 0
居住地: 浙江省台州市

发表于 2009-2-18 10:37:06 |显示全部楼层

span.s {padding:32px; background-color: #ecd8db; line-height:50px;}
加个高度看看

租服务器，上51IDC [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

聪明的一休

中级会员 

帖子: 140
体力: 469
威望: 0
居住地: 浙江省台州市

发表于 2009-2-18 10:39:49 |显示全部楼层

不知道你这个用在什么地方，少了太多的控制元素~~~

使用道具举报

小鱼荡秋千

中级会员 

帖子: 108
体力: 470
威望: 0
居住地: 福建省宁德市

发表于 2009-2-18 10:40:52 |显示全部楼层

span中好像不可以设置内外边距

提示：您可以先修改部分代码再运行

使用道具举报

不再等待

帖子: 354
体力: 1095
威望: 0

发表于 2009-2-18 10:41:23 |显示全部楼层

直接转换为块元素就OK

提示：您可以先修改部分代码再运行

[ 本帖最后由 yj511 于 2009-2-18 14:48 编辑 ]

http://www.yiejun.com

使用道具举报

ayan2006　楼主

帖子: 618
体力: 5405
威望: 0

发表于 2009-2-18 10:41:59 |显示全部楼层

原帖由 simonmax 于 2009-2-18 10:37 发表
span.s {padding:32px; background-color: #ecd8db; line-height:50px;}
加个高度看看

这句话如何理解?

Inline element 内联元素
通俗点来说就是文本的显示方式，与块级元素相反，内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度

http://t.qq.com

使用道具举报

CSS魔术师

荣誉管理 

帖子: 2452
体力: 5010
威望: 4

发表于 2009-2-18 10:52:16 |显示全部楼层

对行内元素设置垂直内边距是无效的。你可以让它们左浮动，或让它们成为行内块。
或者在 IE 下让它们 hasLayout 也可以（比如设置它的高度或宽度），不过不建议这样做。

■ 提问请贴图贴代码。　　● 我的微博　　● 我的博客 (已恢复)

使用道具举报

yoom　

木匠的背篓

帖子: 4863
体力: 14377
威望: 18
居住地: 浙江省杭州市

发表于 2009-2-18 10:52:22 |显示全部楼层

回复 6# ayan2006 [楼主] 的帖子

给内联元素加display:inline-block;即可让它以块级呈现，但IE6还需要加一个zoom:1;。

集艺术之精湛于邮票。

使用道具举报

ayan2006　楼主

帖子: 618
体力: 5405
威望: 0

发表于 2009-2-18 11:00:35 |显示全部楼层

原帖由 birdstudio 于 2009-2-18 10:52 发表
对行内元素设置垂直内边距是无效的。你可以让它们左浮动，或让它们成为行内块。
或者在 IE 下让它们 hasLayout 也可以（比如设置它的高度或宽度），不过不建议这样做。

我在《精通CSS.DIV网页样式与布局》里看到一个例子，<a>、<span>、<em>都属于内联元素，可为什么它也可以设padding和margin?
代码如下：

<html>
<head>
<title>按钮超链接</title>
<style>

</style>
   </head>
<body>
	<a href="#">首页</a>
	<a href="#">心情日记</a>
	<a href="#">学习心得</a>
	<a href="#">工作笔记</a>
	<a href="#">生活琐碎</a>
	<a href="#">其他</a>
</body>
</html>

提示：您可以先修改部分代码再运行

http://t.qq.com

使用道具举报

yoom　

木匠的背篓

帖子: 4863
体力: 14377
威望: 18
居住地: 浙江省杭州市

发表于 2009-2-18 11:02:57 |显示全部楼层

回复 9# ayan2006 [楼主] 的帖子

因为你没有加DTD声明。

集艺术之精湛于邮票。

使用道具举报

ayan2006　楼主

帖子: 618
体力: 5405
威望: 0

发表于 2009-2-18 11:14:42 |显示全部楼层

原帖由 yoom 于 2009-2-18 11:02 发表
因为你没有加DTD声明。

那请教，偶9楼引用的《精通CSS.DIV网页样式与布局》中的例子，在a标记上定义padding margin值，实际上，是不符合w3c标准的吗？。。。

http://t.qq.com

使用道具举报

CSS魔术师

荣誉管理 

帖子: 2452
体力: 5010
威望: 4

发表于 2009-2-18 11:26:09 |显示全部楼层

原帖由 ayan2006 于 2009-2-18 11:14 发表

那请教，偶9楼引用的《精通CSS.DIV网页样式与布局》中的例子，在a标记上定义padding margin值，实际上，是不符合w3c标准的吗？。。。

怪癖模式自然是不标准的。

■ 提问请贴图贴代码。　　● 我的微博　　● 我的博客 (已恢复)

使用道具举报

Cutsin

帖子: 409
体力: 1653
威望: 3

发表于 2009-2-18 11:50:16 |显示全部楼层

误导啊……
版主请多注意下……

原帖由 yoom 于 2009-2-18 10:52 发表
给内联元素加display:inline-block;即可让它以块级呈现，但IE6还需要加一个zoom:1;。

moonless.net

使用道具举报

ayan2006　楼主

帖子: 618
体力: 5405
威望: 0

发表于 2009-2-18 14:09:48 |显示全部楼层

为什么在css中设了body的margin:0; padding:0; 后
span 标记中padding就会失效?．．这是为什么？

我主要是想知道为什么？如果是继承span的padding应该也是22pix啊．

http://t.qq.com

使用道具举报

yoom　

木匠的背篓

帖子: 4863
体力: 14377
威望: 18
居住地: 浙江省杭州市

发表于 2009-2-18 14:20:48 |显示全部楼层

回复 13# cutsin 的帖子

请具体说明是哪里误导了，谢谢！

集艺术之精湛于邮票。

使用道具举报

徐魔风

金牌会员 

帖子: 1244
体力: 3267
威望: 0

发表于 2009-2-18 14:24:33 |显示全部楼层

你没加单位。。。。

努力精通Javascript，然后PHP

使用道具举报

Cutsin

帖子: 409
体力: 1653
威望: 3

发表于 2009-2-18 14:27:00 |显示全部楼层

回复 14# ayan2006 [楼主] 的帖子

没有失效，你得加上单位啊……

body是有默认margin的，你两个例子的区别仅仅是在第一个例子中把它设成了0；

margin-top和margin-bottom不会对非置换行内元素产生影响；
padding则在四个方向上都有效且不会继承。

moonless.net

使用道具举报

Cutsin

帖子: 409
体力: 1653
威望: 3

发表于 2009-2-18 14:30:37 |显示全部楼层

改个例子看得清楚点：

提示：您可以先修改部分代码再运行

moonless.net

使用道具举报

yoom　

木匠的背篓

帖子: 4863
体力: 14377
威望: 18
居住地: 浙江省杭州市

发表于 2009-2-18 14:31:43 |显示全部楼层

回复 1# ayan2006 [楼主] 的帖子

span.s {background-color: #ecd8db; margin:22px; padding:22px;display:inline-block;}

复制代码

集艺术之精湛于邮票。

使用道具举报

Cutsin

帖子: 409
体力: 1653
威望: 3

发表于 2009-2-18 14:32:24 |显示全部楼层

回复 15# yoom 的帖子

噢，是后半句

moonless.net

使用道具举报

ayan2006　楼主

帖子: 618
体力: 5405
威望: 0

发表于 2009-2-18 14:34:37 |显示全部楼层

原帖由 cutsin 于 2009-2-18 14:27 发表
没有失效，你得加上单位啊……

body是有默认margin的，你两个例子的区别仅仅是在第一个例子中把它设成了0；

margin-top和margin-bottom不会对非置换行内元素产生影响；
padding则在四个方向上都有效且不会继承 ...

你好，谢谢你的回复，不好意思忘记写单位．．可是加了单位pix．．为什么效果还是不对？
如以下．为什么运行效果..看到的上边距仍是帖着边框，好像是0pix，为什么不为22pix呢？

body { margin:0; padding:0; background: #FFF; font-size:14px; color:#000;}
span.s {background-color: #ecd8db; margin:22px; padding:22px;}

复制代码

你说的＂margin-top和margin-bottom不会对非置换行内元素产生影响；"
这是指什么？我的代码中没有用到啊．

[ 本帖最后由 ayan2006 于 2009-2-18 14:45 编辑 ]

http://t.qq.com

使用道具举报

CSS魔术师

荣誉管理 

帖子: 2452
体力: 5010
威望: 4

发表于 2009-2-18 14:36:43 |显示全部楼层

原帖由 ayan2006 于 2009-2-18 14:09 发表
为什么在css中设了body的margin:0; padding:0; 后
span 标记中padding就会失效?．．这是为什么？

我主要是想知道为什么？如果是继承span的padding应该也是22pix啊．

看起来你还没明白。body 本身有默认的边距（不同浏览器可能分别定义为 padding 或 margin）。当你没有把它清零时，看起来就好像 span 是有 padding 的。但其实那是 body 的边距。
padding 区域会填充背景色，所以你可以看到，那并不是 span 的 padding。

虽然行内元素的垂直 padding 不影响布局，但它也是有意义的，就用来填充背景。所以你可以为 span 设置大一点 line-height，或许就可以得到你需要的效果。

■ 提问请贴图贴代码。　　● 我的微博　　● 我的博客 (已恢复)

使用道具举报

yoom　

木匠的背篓

帖子: 4863
体力: 14377
威望: 18
居住地: 浙江省杭州市

发表于 2009-2-18 14:39:36 |显示全部楼层

回复 21# ayan2006 [楼主] 的帖子

还没有pix这个单位

。

集艺术之精湛于邮票。

使用道具举报

yoom　

木匠的背篓

帖子: 4863
体力: 14377
威望: 18
居住地: 浙江省杭州市

发表于 2009-2-18 14:41:06 |显示全部楼层

回复 20# cutsin 的帖子

我也不想加zoom:1;但据说还是加上好，触发Haslayout。

集艺术之精湛于邮票。

使用道具举报

ayan2006　楼主

帖子: 618
体力: 5405
威望: 0

发表于 2009-2-18 14:47:44 |显示全部楼层

原帖由 yoom 于 2009-2-18 14:39 发表
还没有pix这个单位。

汗．．偶真的没脸见人了．．

http://t.qq.com

使用道具举报

不再等待

帖子: 354
体力: 1095
威望: 0

发表于 2009-2-18 14:49:31 |显示全部楼层

转换成块不就解决了么？还想要什么？

效果在5楼，多看看22楼

PS:还有没有pix这个单位。。。。

http://www.yiejun.com

使用道具举报

ayan2006　楼主

帖子: 618
体力: 5405
威望: 0

发表于 2009-2-18 15:06:52 |显示全部楼层

原帖由 yj511 于 2009-2-18 14:49 发表
转换成块不就解决了么？还想要什么？

效果在5楼，多看看22楼

PS:还有没有pix这个单位。。。。

偶只是想知道1楼代码的运行效果，为什么最终span的上边距会是0px，而不是22px?

http://t.qq.com

使用道具举报

yoom　

木匠的背篓

帖子: 4863
体力: 14377
威望: 18
居住地: 浙江省杭州市

发表于 2009-2-18 15:13:28 |显示全部楼层

回复 27# ayan2006 [楼主] 的帖子

那22px很可能是body的上边距，而你误认为是span的上边距。

集艺术之精湛于邮票。

使用道具举报

Cutsin

帖子: 409
体力: 1653
威望: 3

发表于 2009-2-18 15:16:43 |显示全部楼层

回复 24# yoom 的帖子

display:inline-block就已经触发hasLayout了，而且前半句也有点问题，应是内部呈递为block，本身呈递为置换行内元素

[ 本帖最后由 cutsin 于 2009-2-18 15:20 编辑 ]

moonless.net

使用道具举报

yoom　

木匠的背篓

帖子: 4863
体力: 14377
威望: 18
居住地: 浙江省杭州市

发表于 2009-2-18 15:22:37 |显示全部楼层

回复 29# cutsin 的帖子

NO，没有触发。
http://bbs.blueidea.com/viewthread.php?tid=2726100

补充：我认错，原来设置display:inline-block;就已经触发了，我还以为要加zoom:1;呢。

[ 本帖最后由 yoom 于 2009-2-18 15:28 编辑 ]

集艺术之精湛于邮票。

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-1-15 00:01 , Processed in 0.542699 second(s), 10 queries , Gzip On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部