+ -
当前位置:首页 → 问答吧 → 看书里的代码,有点小发现,行内元素的margin和position

看书里的代码,有点小发现,行内元素的margin和position

时间:2010-11-17

来源:互联网

看到代码能做出效果,但是具体的解释没有,小研究了一下 ,得出如下结果,不知道是否正确,如有错误望指正!
复制内容到剪贴板
代码:
<div id="wrap">
     <span>123456</span>
</div>
行内元素的margin只对左右起作用
比如你个span 加上margin:-5px 5px 5px -5px;
span只会左右移动,垂直方向不论数值多大 都不会变化
给span加上display:block属性,就可以使垂直和水平方向的margin都起作用了

而且当span的内容超出wrap之后,ie6下超出部分会隐藏
利用positon:relative;就可以让span的内容即使超出wrap容器也可以显示了

作者: waterisi   发布时间: 2010-11-17

迅雷一笔试题就用到了“利用positon:relative;就可以让span的内容即使超出wrap容器也可以显示了”

作者: qq258145840   发布时间: 2010-11-20

引用:
原帖由 waterisi 于 2010-11-17 12:30 发表
看到代码能做出效果,但是具体的解释没有,小研究了一下 ,得出如下结果,不知道是否正确,如有错误望指正!

     123456

行内元素的margin只对左右起作用
比如你个span 加上margin:-5px 5px 5px -5px;
span ...
因为当你把span设为position:relative;它已经脱离了文档流

作者: rao3324180   发布时间: 2010-11-20