displayinlineblock间隙,displayinlineblock
display: inline-block并排显示为什么中间会多出空白？
display：inline-block两个元素之间会默认有一个空格哦，你给父级div加上font-size：0就可以避免的，要设置字体大小可以在子元素里再设置
如何理解CSS中的display:inline-block属性？
举例：
a标签1/aa标签2/aa标签3/a
a标签本来就是内联
这样写，他出来效果就是--------标签1标签2标签3
但如果你想要定义宽度,不加块状是起不来作用的，都是单单加块状（display:block），他又换行了，所以这时加display:inline-block
就起到很大作用，内联块状，宽度既能实现，又能不换行...
a{width:100px;
display:inline-block}
有时候解决ie6双倍像素撑开，display:inline不够用，也会用到这个属性
----------------
我去...浪费我时间...真手贱
css，如何处理行级标签之间的空格，每次对某些用display:inline-block
第一种办法：你改这么写（最简单的一种）：a1/aa2/aa3/aa4/a,就是A标签之间不换行不加空格
第二种办法：如果你非要换行这种写法：
这么改（这种写法，在ie6中还是稍微有点间隙，但是在别浏览器中都正常）：
a{display:inline-block;width:27px;height:27px;text-align:center}
.nav{font-size:0}
.nav a{font-size:12px}
div class="nav"
a1/a
a2/a
a3/a
a4/a
div
css将列表以行内块显示时怎么把他们之间的间隙去掉？在标签上设置margin:0也没有用
原因是display:inline-block;属性产生的间隙。
display:inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。
方案一：给元素设置float:left,缺点高度塌陷，要清除浮动。（推荐）
li{display:inline-block;padding:5px;background-color:#ff6;float:left;}
.clr:after{clear:both;display:block;overflow:hidden;height:0;content:".";}
.clr{zoom:1;}
ul class="clr"
lia href=""HTML/a/li
lia href=""CSS/a/li
lia href=""Javascript/a/li
lia href=""XML/a/li
/ul
方案二：设置子元素的margin-left为负值，但是元素之间的间隙大小是根据上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，如果font-szie：16px,chrome空隙为8px,火狐空隙为4px.所以这个方法不通用。
方案三：设置父元素 display:table;word-spacing:-1em;目前这个方法可以完美解决，且兼容其他浏览器。
display:inline-block是什么意思
意思是用来处理行内非替换元素的高宽问题的！
行内非替换元素，比如span、a等标签，正常情况下士不能设置宽高的，加上该属性之后，就可以触发让这类标签表现得如块级元素一样，可以设置宽高。
将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
扩展资料:
例子代码：
Code highlighting produced by Actipro CodeHighlighter (freeware);!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
""
style
span,div{background-color:#F60;margin-bottom:5px;margin-left:5px;height:50Px;}
/style
div style="background-color:#F60"Div默认为 block/div
span style="display:block;"加了block属性/span
span style="display:block;"加了block属性/span
span style="display:block;"加了block属性/span
span没加block属性/span
span没加block属性/span
span没加block属性/span
CSS里的display:inline-block会有间隙，怎么解决？
!doctype html
html
head
meta charset="utf-8"
title无标题文档/title
/head
body
未使用font-size:0方法的
使用inline-block出现的间隙的解决方法：
父加上样式 font-size:0; 是为的是去掉多余的空白
子元素加上应有的字体样式
div style="width:120px; background:#ECEAEA; padding:10px;text-align:center;"
span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#F78789; vertical-align:middle; text-align:center;"1/span
span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#35B86D;vertical-align:middle; text-align:center;"2/span
/div
使用font-size:0方法后的效果
div style="font-size:0; width:120px; background:#ECEAEA; padding:10px;text-align:center;"
span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#F78789; vertical-align:middle; text-align:center;"1/span
span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#35B86D;vertical-align:middle; text-align:center;"2/span
/div
/body
/html