您现在的位置: 像素吧 >> 设计教程 >> css样式 >> 正文

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

来源:不详 日期:2008-1-7 22:46:00 作者:佚名 查看:
"margin外边距属性在inline内联元素中应用的测试!"这篇css样式如果帮助了您,请记得分享给您身边的朋友,如果您有比"margin外边距属性在inline内联元素中应用的测试!"更好的教程请发布共享,帮助别人快乐自己!
  版权声明:52CSS.com原创,未经同意,谢绝转载!

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

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

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]
    [ 可先修改部分代码 再运行查看效果 ]
div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]
    [ 可先修改部分代码 再运行查看效果 ]
  我们通过运行发现,文本“52CSS.com”在垂直方向上没有发生任何变化,margin不能改变它的行高,也改变不了它在垂直方向上的位置。我们将margin-top改成margin-bottom将会得到同样的效果。

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

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]
    [ 可先修改部分代码 再运行查看效果 ]
div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]
    [ 可先修改部分代码 再运行查看效果 ]
  通过上面的运行结果,我们可以了解到,在水平方向上对内联元素应用margin属性,得到的结果与在块元素上应用margin属性的效果是一致的。也就是说水平方向上我们得到了外边距而垂直方向上没有任何改变
  
--------------------------------------------------------------------------------------------
补充: [感谢:purecss]

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

div css xhtml xml Example Source Code Example Source Code [www.52css.com]  设置内联元素的上下边界是规范所允许的,但显然它对行的高度没有影响,且由于边办效果是透明的,没有任何的视觉影响。这是因为边界应用于内联元素时不改变元素的行高度。(能够改变只含文本的行间距的属性只有line-height,font-size,vertical-align.)这只是对内联元素的顶端和底端而言的。
  还为我们常认为的内联元素不支持上下补白错误关点原因和这个边界的原因是一样的。至于内联元素边界什么时候需要用到,至今也没有遇到过。
  

相关评论:

发表评论

  • 昵 称:
  • 内 容:
  •  
  • 虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号!