margin外边距属性在inline内联元素中应用的测试！_Div+CSS教程
教程Tag：暂无Tag,欢迎添加,赚取U币!
版权声明：MB5U.com原创，未经同意，谢绝转载！
我们往往对块元素（block element）应用外边距属性margin，以期对块元素进行更好的控制，同时也可以应用此属性将块元素定位在预想的位置。假如对内联元素（inline element）应用外边距属性margin，会是何效果呢？我们今天就此问题，展开一些小测试。希望大家在以后的编码中，可以记住这些效果，更好的加以利用。
我们首先测试一下，在内联元素中垂直方向上应用margin属性会是何效果：
我们通过运行发现，文本“MB5U.com”在垂直方向上没有发生任何变化，margin不能改变它的行高，也改变不了它在垂直方向上的位置。我们将margin-top改成margin-bottom将会得到同样的效果。
那么内联元素中水平方向上应用margin属性会是何效果呢：
通过上面的运行结果，我们可以了解到，在水平方向上对内联元素应用margin属性，得到的结果与在块元素上应用margin属性的效果是一致的。也就是说水平方向上我们得到了外边距而垂直方向上没有任何改变。
--------------------------------------------------------------------------------------------
补充： [感谢：purecss]
“没有任何改变”应该明确的说是在视觉上没有任何改变，引用《CSS权威指南》中的一段话：
还为我们常认为的内联元素不支持上下补白错误关点原因和这个边界的原因是一样的。至于内联元素边界什么时候需要用到，至今也没有碰到过。
我们往往对块元素（block element）应用外边距属性margin，以期对块元素进行更好的控制，同时也可以应用此属性将块元素定位在预想的位置。假如对内联元素（inline element）应用外边距属性margin，会是何效果呢？我们今天就此问题，展开一些小测试。希望大家在以后的编码中，可以记住这些效果，更好的加以利用。
我们首先测试一下，在内联元素中垂直方向上应用margin属性会是何效果：
代码调试框 [www.mb5u.com]
代码调试框 [www.mb5u.com]
我们通过运行发现，文本“MB5U.com”在垂直方向上没有发生任何变化，margin不能改变它的行高，也改变不了它在垂直方向上的位置。我们将margin-top改成margin-bottom将会得到同样的效果。
那么内联元素中水平方向上应用margin属性会是何效果呢：
代码调试框 [www.mb5u.com]
代码调试框 [www.mb5u.com]
通过上面的运行结果，我们可以了解到，在水平方向上对内联元素应用margin属性，得到的结果与在块元素上应用margin属性的效果是一致的。也就是说水平方向上我们得到了外边距而垂直方向上没有任何改变。
--------------------------------------------------------------------------------------------
补充： [感谢：purecss]
“没有任何改变”应该明确的说是在视觉上没有任何改变，引用《CSS权威指南》中的一段话：
示例代码 [www.mb5u.com]
设置内联元素的上下边界是规范所答应的，但显然它对行的高度没有影响，且由于边办效果是透明的，没有任何的视觉影响。这是因为边界应用于内联元素时不改变元素的行高度。（能够改变只含文本的行间距的属性只有line-height,font-size,vertical-align.）这只是对内联元素的顶端和底端而言的。
还为我们常认为的内联元素不支持上下补白错误关点原因和这个边界的原因是一样的。至于内联元素边界什么时候需要用到，至今也没有碰到过。
相关Div+CSS教程：
- 相关链接：
- 教程说明：
Div+CSS教程-margin外边距属性在inline内联元素中应用的测试！
。