display为inline-block的span标签margin-top失效问题 财富值55

2016-10-15 02:24发布

做圆角矩形的时候,遇到下面的问题,先贴代码:

<!DOCTYPE html> <html> <head>     <title>test</title>     <meta charset="UTF-8">     <style>         .quarter_round {             background: white;             display: inline-block;             width: 14px;             height: 14px;             overflow: hidden;             font-family: 宋体, sans-serif; /*不设置为宋体则FF下异常*/         }         .quarter_round span {             display: inline-block;             font-size: 28px;             line-height: 1;         }         .quarter_round .lb {             margin-top: -14px;         }     </style>     <script>     </script> </head> <body> <span class="quarter_round"><span class="lb">●</span></span> </body> </html> 

所有span标签都是inline-block,我想通过margin-top让内层标签“升”上去,让左下角的4分之一圆显示在外层span里,但是我发现margin-top到达某个值的时候就不再上升了,上面的代码中是-11px,请问为什么会出现这种情况?

友情提示: 问题已经关闭,关闭后问题禁止继续编辑,回答。