margin:负值 也挺有用

css中一些属性设置成 负值能够获得不同的效果。

如：

• background-position: 负值 成就了 css sprite 雪碧图。
• text-indent: 负值 实现连接文字隐藏, 固然这个在将来不推荐使用了哈，有点影响读屏器

首先定义一下margin。
margin定义盒模型的外边距

margin的一些特性

• first-child 的 margin-top 值会穿透给上一层
• last-child 的 margin-bottom 会无效
• 同级间的 margin-top bottom 会合并.

固然一些IE低端浏览器可能会有不同的表现 >///< 没仔细测过

使用负margin使icon同文字水平剧中

日常作一个icon 16x16须要跟文案的行文字水平剧中对齐，须要用到vertical-align: middle

固然这个时候要给icon配上display:inline-block，这样能够给icon设置宽高。
可是 vertical-align: middle 的时候icon下方会有4px的 baseline空隙，这个时候看起来会对不齐。具体能够看[vertical-align]的定义。

因此这个时候须要使用 margin 负值来调节上下偏移。

阻止浮动元素换行

这个我挺喜欢，有的时候由于浮动元素的宽度问题，致使没必要要的换行。能够用margin 负值来搞掂。

flaoat:left; margin-right:-10px;

另外在ul>li 的 结构中也能够用margin 负值来阻止换行，
好比你为了实现float的li间距，以及ul两侧的空隙相等，这个时候若是外围dom两侧自己有padding了。
那么li中的 margin-right 属性就会给右侧多出一些空隙，
这个时候 ul 弄一个 margin-right:负值 会有神奇的效果。