负margin的移位参考线

同早年~


 

问题描述

在xx项目中,羊城通卡号的输入框处使用了xx库中的实现方式,即将提示文字标签<label>通过负margin移位到<input>框的下面。静态时展现良好,js逻辑添加后发现,输入文字时<input>框会抖动。排查后发现,是重置了<label>的负margin值引起的。这引起了我对负margin定位的兴趣,于是乎,做了个简单的测试。

 

Demo测试

初始状态:

图 (1)

 

灰框 {margin-bottom:-10px;}:

图 (2)

灰框 {margin-bottom:-30px;}:

图 (3)

绿框 {margin-top:-10px;}:

图 (4)

绿框 {margin-top:-30px;}:

图 (5)

灰框 {margin-top:-30px;}:

图 (6)

以上可以看出:

  • 元素的margin-bottom为负值时,元素本身不动,其下的元素上移(图2、3)。
  • 元素的margin-top为负值时,元素上移,其下的元素也跟着上移(图4、5、6)。
  • 上下紧邻的两个元素,设置上面元素的margin-bottom与设置下面元素的margin-top,视觉效果相同(图2与4、3与5的比较)。

让灰框和绿框都左浮,下面添加一没有清浮的段落,再来测一组:

初始状态:

图 (1)

绿框 {margin-bottom:-29px;}:

图 (2)

绿框 {margin-bottom:-30px;}:

图 (3)

从上一组测试的图2、3,以及这组数据可以很形象地看出,当元素的margin-bottom设为负的x像素时,就好像这个元素释放出了下方x像素的空间,当x等于该元素的高度时,空间完全被释放,其它元素就当该元素不存在似的。故本组图2中的”text”还卡在绿框的右边,而图三中(负margin-bottom值等于元素高度)”text”“穿”过绿框,直接卡到了灰框的右侧。

水平方向的大致类似,即元素的margin-right为负值时,元素本身不动,右侧的元素左移,元素的margin-left为负值时,元素左移,右侧的元素也跟着左移。

问题分析

了解了负margin尤其是负margin-bottom的定位原则,再来看前面提到的抖动问题: 

因为<input>框中输入文字时,提示文字是要消失的(<label>标签{display:none;}),故<label>的负margin-bottom值要与<label>的高度一致。否则若值过大(如-31px),输入文字时<input>框会向下抖动,若值过小(如-29px),则输入文字时<input>框会向上抖动。知道了这些,也就不难理解库中为什么通过设置<label>的负margin-bottom,而不是通过设置<input>的负margin-top来实现两个元素的叠加效果了。

2012.12.8

posted @ 2014-06-24 09:39  lilac(雪青)  阅读(...)  评论(...编辑  收藏