inline block inline-block 内联元素块级元素行内块级元素的区别
display:inline; 实例: <b>, <td>, <a>, <img>
内联元素,简单来说就是在同一行显示。他没有高度,给内联元素设置width和height是没效果的。
display:block; 实例: <h1>, <p>, <ul>, <table>
块级元素,简单来说就是就是有换行,会换到第二行。同时可以设置宽高。
display:inline-block;
行内区块元素,既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align(因为这个垂直对齐属性只对设置了inline-block的元素有效) 属性。
例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 100%; background: yellow; height: 100px; text-align: center; line-height: 100px; } a{ color:#fff; text-decoration: none; display: inline-block; width: 100px; height: 30px; line-height: 30px; background: red; } </style> </head> <body> <div> <a href="">我是a1</a> <a href="">我是a2</a> <a href="">我是a3</a> <a href="">我是a4</a> </div> </body> </html>
效果
有没有发现,每个a之间都会有一个空隙,这个空隙是因为块级元素会换行,HTML 中的换行符、空格符、制表符等合并为空白符.所以换行符会占据宽度,产生间隙。
如何取消inline-block产生的间隙
我认为有2种方法
第一种
负值的margin各个浏览器的负值也不相同,才能完美贴合
浏览器 | word-spacing |
火狐 | word-spacing:-8px |
chrome | word-spacing:-6px |
IE | word-spacing:-4px |
第二种
在父元素的css中设置word-spacing负值
浏览器 | word-spacing |
火狐 | word-spacing:-8px |
chrome | word-spacing:-6px |
IE | word-spacing:-4px |
效果
其他方法见:去除inline-block元素间间距的N种方法。