欢迎光临杨雨的个人博客站!
关注互联网和搜索引擎的个人博客网站
 >  >
inline-block带来的元素间距问题解决
发布时间： 04:21  编辑：   点击：   
display:inline-block：众前端们都知道，其作用是将对象呈递为内联对象，但是对象的内容作为块对象呈递。有如下代码&
&div&class=&ac-btn&& &&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a&href=&#&&class=&btn-save&&&/a& &&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&a&href=&#&&class=&btn-print&&&/a& &&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&/div& &&
.ac-btn&a{background:url(../img/action.png)&no-width:73height:&25display:&inline-} &&
.ac-btn&.btn-save{background-position:&0&0;} &&
.ac-btn&.btn-print{background-position:&-73px&0;}&&
这样呈现的如下
2个元素之间有间隙，那么问题来了为什么会出现间隙？
原因是inline-block允许空格，出现空隙的罪魁祸首就是包括换行在内的空白符。如何消除间隙？
对父级元素设置font-size:0
即上述CSS代码改为&
.ac-btn&{font-size:0;} &&
.ac-btn&a{background:url(../img/action.png)&no-width:73height:&25display:&inline-} &&
.ac-btn&.btn-save{background-position:&0&0;} &&
.ac-btn&.btn-print{background-position:&-73px&0;}&&
block，inline和inlinke-block细节对比
display:block1.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。3.block元素可以设置margin和padding属性。
display:inline1.inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。2.inline元素设置width,height属性无效。3.inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
分享是一种快乐，也是一种美德:
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
滇ICP备号-1ie7下的一个布局问题 如何实现已设置最小宽度div内声明display:block的a元素宽度与父div同宽？
见代码，鼠标经过时通过背景色看出ie7下的a元素宽度不一&style type="text/css"&li { list-style:}body { position:}.list_block_pa { position: left:210 top:25 min-width:100 _width:100 white-space: overflow: padding:6px 0 15 background:# border:solid 1px #}.list_block_pa a { display: cursor: padding:0 10px 0 13 height:33 line-height:33 color:#8c8c8c; font-size:14 text-decoration:}.list_block_pa a:hover { background:#}&/style&&!-- structure --&&ul class="list_block_pa"& &li&&a href="#"&1cm-5cm&/a&&/li& &li&&a href="#"&6cm-10cm&/a&&/li& &li&&a href="#"&11cm-20cm&/a&&/li& &li&&a href="#"&21cm-30cm&/a&&/li& &li&&a href="#"&100cm-200cmmmmmmmmmmmmmmmm&/a&&/li&&/ul&
已有帐号？
无法登录？
社交帐号登录如何让 height:100%; 起作用 – WEB骇客}