论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

margin外边距属性在inline内联元素中应用的测试!

文章类别:div+css布局 | 发表日期:2008-9-26 11:13:58

  版权声明:21shipin.com原创,未经同意,谢绝转载!

  我们往往对块元素(block element)应用外边距属性margin,以期对块元素进行更好的控制,同时也可以应用此属性将块元素定位在预想的位置。假如对内联元素(inline element)应用外边距属性margin,会是何效果呢?我们今天就此问题,展开一些小测试。希望大家在以后的编码中,可以记住这些效果,更好的加以利用。

  我们首先测试一下,在内联元素中垂直方向上应用margin属性会是何效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  我们通过运行发现,文本“21shipin.com”在垂直方向上没有发生任何变化,margin不能改变它的行高,也改变不了它在垂直方向上的位置。我们将margin-top改成margin-bottom将会得到同样的效果。

  那么内联元素中水平方向上应用margin属性会是何效果呢:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  通过上面的运行结果,我们可以了解到,在水平方向上对内联元素应用margin属性,得到的结果与在块元素上应用margin属性的效果是一致的。也就是说水平方向上我们得到了外边距而垂直方向上没有任何改变
  
--------------------------------------------------------------------------------------------
补充: [感谢:purecss]

  “没有任何改变”应该明确的说是在视觉上没有任何改变,引用《CSS权威指南》中的一段话:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
  设置内联元素的上下边界是规范所答应的,但显然它对行的高度没有影响,且由于边办效果是透明的,没有任何的视觉影响。这是因为边界应用于内联元素时不改变元素的行高度。(能够改变只含文本的行间距的属性只有line-height,font-size,vertical-align.)这只是对内联元素的顶端和底端而言的。

  还为我们常认为的内联元素不支持上下补白错误关点原因和这个边界的原因是一样的。至于内联元素边界什么时候需要用到,至今也没有碰到过。
  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058