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 16×16需要跟文案的行文字水平剧中对齐,需要用到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:负值 会有神奇的效果。

    原文作者:胡萝卜有点坑
    原文地址: https://segmentfault.com/a/1190000000624338
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞