inline-block空白间隙

很多时候display:inline-block比float:left;好用。也因为IE6 7不支持inline-block,所有一般都这样写:{display:inline-block; *display:inline; *zoom:1},但是用了inline-block之后一些较高级的浏览器会出现空白间隙,而在IE6 7下是没有的。如图:

其实这个问题是我们自己造成的,为了代码的可读性,在一行结束打个回车换行,回车产生回车符,回车符相当于空白符,真正原因就是这个回车符。

解决方法:竟然是字符,那么只需要把字体大小设置成0就好了。font-size:0;这个方法在safari浏览器下还是有问题的,完整的解决方法是:

ul{
    font-size:0;
    letter-spacing: -8px;/*根据不同字体字号或许需要做一定的调整*/
    word-spacing: -8px;
}
li{
    display:inline-block;
    *display:inline;
    *zoom:1;
    letter-spacing:normal;
    word-spacing:normal;
}

  

时间: 2024-10-13 15:30:04

inline-block空白间隙的相关文章

CSS font-size: 0去除内联元素空白间隙

我们在编写HTML标签的时候,通常会使用换行,缩进来保证代码的可读性.同时,在编写CSS样式的时候,也会需要把一些元素设置为inline或inline-block.这样一来,有时在页面中会出现意外的空白间隙导致页面视图与本意不符. 先来了解一下出现空白间隙的原因吧!因为内联元素默认排版中有空白间隙,以此来把每一个内联元素独立分开,这里的空白间隙也就是空白的文本节点,在缩进代码时会占据宽度,所以就导致了意外的空白间隙. 那么接下来为大家提供三种解决方法 1.去掉两个HTML标签中的空白,也就是去掉

inline-block产生空白间隙的问题

在项目中遇到给设置display:inline-block属性出现空白间隙 如: #wrapper{ border: 1px solid blue; } #wrapper div{ width: 100px; height:100px; display:inline-block; background: #eee; } <div id="wrapper"> <div>div1</div> <div>div2</div> <

CSS display:inline|block|inline-block差异

display:inline|block|inline-block三属性的区别和联系,block就是将元素显示为块级元素,inline就是将元素 显示为行内元素,CSS display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 详解CSS display:inline|block|inline-block的区别 ◆CSS display:block CSS display:block就是将元素显示为块级元素. blo

简记&lt;img&gt;下方的空白间隙

当你书写以下代码 <img src="balbal.." /> <div></div> 你会发现<img>距离<div>隔了几个空白像素 那么 Q1:这些空白像素如何产生的? A1:这是因为 水平方向上的元素垂直对齐的方式  造成的. 通常情况,能在一行显示的元素,display应为inline或者line-block. 如果一行上的元素高矮不一致,那么应该如何对齐这些inline? css提供了vertical-align来

inline block inline-block总结

一.block表示块级元素,其元素通常会单独成一块,独占一行: 二.inline表示内联元素,不会产生换行,其排版会在一行显示,直到一行被占满. 三.常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等:常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR        等. 四.一般使用display:block与display:inline来改变元素的

inline,block,inline-block解析

display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是:  和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图

display:inline/block/inline-block

display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-block; 就是在同一行内的块级元素. 说概念太模糊,来个真实案例吧. <a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a><a href=&qu

关于 inline block 元素之间的空格

本篇文章由:http://xinpure.com/about-the-inline-block-element-between-spaces/ 说点什么 display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的... 最简单的方法就是把 inline-block 元素之间的回车删除,就是代码显示有点不美观,影响阅读. 方法总结 以下方法不保证浏览器兼容性问

[CSS3] CSS Display Property: Block, Inline-Block, and Inline

Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest. Takeway: Inline: Can NOT add height and width. But can add marg