几个 inline-block 元素,比如 button,如果在 HTML 中连续写在一起,则它们之间可以没有空隙。但是如果在 HTML 中将它们分行格式化,则它们之间有空隙。例如:
<!DOCTYPE html> <html> <head> <style type="text/css"> button { margin: 0; border: 1px solid gray; } </style> </head> <body> <div> <button>One</button><button>Two</button><button>Three</button> </div> <div> <button>One</button> <button>Two</button> <button>Three</button> </div> </body> </html>
这个问题的解决方法有不少,其中常用的是这 3 种:一、使用浮动;二、使用零 font-size;三、使用负 margin。具体例子如下:
<!DOCTYPE html> <html> <head> <style type="text/css"> div { margin: 10px; } button { margin: 0px; border: 1px solid gray; } #float-left button { float: left; } #zero-size { font-size: 0; } #zero-size button { font-size: 14px; } #negative-margin { font-size: 14px; } #negative-margin button { margin-left: -7px; } </style> </head> <body> <div id="float-left"> <button>First</button> <button>Second</button> <button>Third</button> </div> <div id="zero-size"> <button>First</button> <button>Second</button> <button>Third</button> </div> <div id="negative-margin"> <button>First</button> <button>Second</button> <button>Third</button> </div> </body> </html>
第一种方法使用了浮动,它的缺点在于,无法直接将父元素居中显示,要居中只能在外边再包一层 div。第二种方法设置父元素的 font-size 为 0,它的缺点在于,在 Android 自带浏览器上会有问题,而且子元素字体不能用 em 或者比例长度。最后一种方法使用负的 margin,它的缺点在于,这个负的 margin-left 值与父元素的字体大小有关,一般是该字体大小的一半,但是它的可靠性值得怀疑,例如在 IE6 和 IE7 中就不对。
在上面几种方法中,通过增加负的 margin-left,我们还可以使得相邻元素的 border 重合,从而可以得到按钮组这种效果。例如:
button { margin: 0px; border: 1px solid gray; } #float-left button { float: left; margin-left: -1px; } #zero-size { font-size: 0; } #zero-size button { font-size: 14px; margin-left: -1px; } #negative-margin { font-size: 14px; } #negative-margin button { margin-left: -8px; }
参考资料:
[1] Fighting the Space Between Inline Block Elements | CSS-Tricks
[2] Bootstrap · Components #buttonGroups
[3] Using font-size: 0 to remove inline-block white-space does not work on Android Browser
[4] web表单设计漫谈之一input按钮在各浏览器之间的兼容性
[5] CSS3 patterned buttons - RedTeamDesign
[6] CSS3 GitHub Buttons
[7] Google+ UI Buttons - Shrapp.nl
[8] CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions