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:負值 會有神奇的效果。