关于负margin的宽度增加？ - 知乎4被浏览1948分享邀请回答1添加评论分享收藏感谢收起13 条评论分享收藏感谢收起后使用快捷导航没有帐号？
只需一步，快速开始
查看: 3176|回复: 7
margin设置成负值有何意义
UID60031在线时间 小时积分583帖子离线17416 天注册时间
高级会员, 积分 583, 距离下一级还需 417 积分
今天看yahoo的css,发现里面不少margin是负值,不理解
#nav_box {
& & & & FLOAT: MARGIN: 0px -50em 0px 0 WIDTH: 100%
}
复制代码
UID156915在线时间 小时积分5帖子离线17416 天注册时间
新手上路, 积分 5, 距离下一级还需 45 积分
沒研究yahoo的CSS，不過我曾試過用負值的MARGIN令table中的一個td產生看似「浮空」的效果，或者你可以參考一下。
UID60031在线时间 小时积分583帖子离线17416 天注册时间
高级会员, 积分 583, 距离下一级还需 417 积分
谢谢,还有朋友了解这个问题吗?
UID195875在线时间 小时积分340帖子离线17416 天注册时间
中级会员, 积分 340, 距离下一级还需 160 积分
能正为什么不能负，一样理解不就可以了
UID113524在线时间 小时积分38525帖子离线17416 天注册时间
&div style=&width:360;heght:360;border:1&&
&div style=&text-align:width:180;heght:100;border:1margin-left:20&&margin-left:20,左边框在里边&/div&&br&
&div style=&text-align:width:180;heght:100;border:1margin-left:0&&margin-left:0,左边框在边界上&/div&&br&
&div style=&text-align:width:180;heght:100;border:1margin-left:-20&&margin-left:-20,左边框在外边&/div&&/div&
&提示：您可以先修改部分代码再运行
UID60031在线时间 小时积分583帖子离线17416 天注册时间
高级会员, 积分 583, 距离下一级还需 417 积分
谢谢上面各位,我想知道用负值有什么意义,大家看一下
他是可以根据浏览器窗口自适应的,以前用表格实现并不困难,他用CSS+DIV实现的,没弄明白
UID19799在线时间 小时积分3021帖子离线17416 天注册时间
金牌会员, 积分 3021, 距离下一级还需 1979 积分
Adamkang在上个帖子中说
谢谢上面各位,我想知道用负值有什么意义,大家看一下
他是可以根据浏览器窗口自适应的,以前用表格实现并不困难,他用CSS+DIV实现的,没弄明白
负margin可以简单当做负值来看，比如上面的yahoo的例子。
它要实现按照浏览器的窗口自适应，那么导航条的宽度就只能按照100％来设定。
而导航的右侧又有内容（宽度一定）。这样就可以把导航条的margin-right设为负值，
来使得右侧留白显示内容。
当然负margin在一些情况下也并不是这么简单的。
UID141603在线时间 小时积分143帖子离线17416 天注册时间
初级会员, 积分 143, 距离下一级还需 57 积分
可以去免费空间广告
Powered by问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如果你觉得不需要做IE7兼容的话，请不要插嘴了，羡慕那些不用兼容IE7的伙伴们！！
&div id="vforsms"&
&input type="text" placeholder="验证码" name="verify" id="verify" class="verify" value="" /&
body{position:}
#vforsms{width:260height:position:top:50%;left:50%;margin-top:-70margin-left:-140padding:10border: 1px solid #border-radius:0.8background:#z-index:20;}
#vforsms input.verify{width:100margin:0 0 10px 0;display:}
#vforsms img.verifyImg{margin:0 0 10px 2cursor:width:100height:28}
#vforsms input{width:185height:28line-height:28px!margin:0 auto 10border:1px solid #background:#border-radius:0.4padding-left:5vertical-align:}
正常显示：
问题页面：
coding....
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
首先：#vforsms input.verify{width:100margin:0 0 10px 0;diaplay:} display写错其次 margin 不能继承的啊
给input添加POSITION: LEFT: 50%可以得到你想要的
好像是双边距的问题给 vforsms 添加 display:inline 能解决问题
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：margin负值的5种使用及相关bug的解决_网站制作关心问题 - 网奇公司
网奇&|&&|&
margin负值的5种使用及相关bug的解决
& 　1. 页面上实现css sprite背景定位效果　　使用img定义margin的负值实现类似background-position效果。此方法能减少一个页面请求数，但是有违样式与布局分离的原则，因此不推荐使用。使用margin负值在IE6/IE7下的bug：有一部分被隐藏掉了　　&div style="height:120width:120 border: 5px solid #888"&　　&div style="background-color:#CEE1EE;margin-top: -10position:zoom:1"&　　&a href="/"&网奇&/a&&/div&　　&/div&　　解决方法：添加position: zoom:1;　　2. 在选项卡等边框线的处理　　使用margin-bottom:-1解决选项卡下边框显示的问题。[注：]使用margin-top、margin-bottom需要看结构如何写，灵活使用。类似的，如果您要用七个div实现8条1像素的左右边框，可以让每个div都有左右1像素的边框，然后margin-right:-1或是margin-left:-1让之间的边框重叠来达到效果。　　3. 图片与文字对齐问题　　当图片与文字在一起，往往都是不对齐的，因为图片和文字默认是底部对齐。当图片较小比较明显，使用vertical-align:对齐，在firefox，chrome下能达到理想效果，但是IE下还是有点别扭。使用margin负值能在每个浏览器上显示完全一致。img标签支持margin四个方向的正的和负的定位。一般使用img标签来显示图标，要与文字对齐达到理想的效果，可以设置img{margin:0 3px -3px 0;}。　　4. 在流动性布局中的应用　　如WordPress的两栏式不固定布局就是使用margin负值来实现的定位，属于左右margin负值在流动性布局中的应用。　　&div style="width:200float:border-right:4px solid #CEE1EE;margin-right:-200"&左侧宽度固定&/div&　　&div style="backround:#888;margin-left:200"&宽度自适应，啦啦啦。。。宽度自适应，啦啦啦。。。宽度自适应，啦啦啦。。。&/div&　　另外一类两栏自适应用到的是margin的上下负值，尤其在一栏高度固定，另外一栏高度不定的两栏或多栏布局中最为常见。高度不固定栏和高度固定的栏上下错开，均无浮动属性，高度不固定的栏margin-top一个负值，大小就是高度固定栏的高度，实现了两栏在同一水平线上。且宽度自适应，并且不用担心有浮动出现的一系列问题。　　样式部分：　　.fixed-height{height:200width:200background:#666;}　　.flow-height{margin-top:-200margin-left:200}　　页面结构：　　&div class="container"&　　&div class="fixed-height"&高度固定哦&/div&　　&div class="flow-height"&高度宽度自适应，啦啦啦。。。高度宽度自适应，啦啦啦。。。&/div&&/div&　　5.隐藏首（末）边框　　本着结构尽量简洁，样式代码尽量少，减少对js的依赖的原则，我们可以用样式来实现列表项头尾无边框的效果，而无需额外设置诸如&li class=&last&&最后一个&/li&　　样式部分：　　&style type="text/css"&　　ul{margin:30padding:0;width:300}　　li{ list-style:}　　/** 横排模式 **/　　.cross{overflow:zoom:1;}　　/** overflow:hidden隐藏最上边border，IE6需要zoom:1 **/　　.cross li {float:padding:0 11px 0 10border-left:1px solid #AAA;margin-left:-1}　　/*margin负值隐藏掉最左边边框*/　　/*竖排模式*/　　.vertical {overflow:position:zoom:1;}　　/*IE下子容器如果包含属性position:relative，则父容器失效(IE bug)，所以也需要设置父容器position:relative解决，IE6需要zoom:1来触发haslayout*/　　.vertical li{border-top:1px dashed #CEE1EE;padding:5px 0;position:top:-1}　　/*竖排margin负值IE6不兼容，改为positon方式处理，与margin负值原理相同*/　　&/style&　　结构部分：　　&ul class="cross"&　　&li&tab1-1&/li&　　&li&tab1-2&/li&　　&li&tab1-3&/li&　　&li&tab1-4&/li&　　&/ul&　　&ul class="vertical"&　　&li&这里是一条信息&/li&　　&li&这里是一条信息&/li&　　&li&这里是一条信息&/li&　　&li&这里是一条信息&/li&　　&li&这里是一条信息&/li&　　&/ul&
网奇网络原创文章，本文地址：，转载请注明出处。
的相关新闻
新手建站指导
免费网站模版
本文评论 　　 (0)
同意评论声明
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款
快速了解网奇
网奇产品导航
网奇 网站管理系统
网奇客户案例
Hot Search:|||||||||||||||||||||||||