浅谈inline-block及解决空白间距
divcss清除行内元素之间HTML空白的方法
divcss清除行内元素之间HTML空白的方法
欢迎大家在这里学习divcss清除行内元素之间HTML空白!这里是我们给大家整理出来的精彩内容。
我相信，这些问题也肯定是很多朋友在关心的，所以我就给大家谈谈这个!解决方案1: font-size:0;最好的方法是在外层元素上设置font-size:0;同时在内层元素上指定字体具体的大小。
复制代码代码如下:
ul.inline-block-list { /* 比如ul 或者ol元素*/
font-size: 0;
}
ul.inline-block-list li {
font-size: 14px; /* 设置具体的字体大小*/
}
为了抵消外层元素的字体属性,在内层元素必须指定font-size 属性，当然这很简单。
最全整理浏览器兼容性问题与项目解决方案
常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
在大多数情况下，我们的需，无论用户用什么浏览器来查看我们的或者登陆我们的系统，都应该是统一的显示效果。
所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。
第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。
某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。
稍有改动就乱七八糟。
代码为什么这么写还不知所以然。
这类开发人员往往经常为兼容性问题所困。
修改好了这个浏览器又乱了另一个浏览器。
改来改去也毫无头绪。
其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。
文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题。
浏览器兼容问题一：不同浏览器的标签默认的外补丁和补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding 差异较大。
碰到频率:100%解决方案：CSS里 *备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS 文件开头都会用通配符*来设置各个标签的外补丁是0。
浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大问题症状:常见症状是IE6中后面的一块被顶到下一行碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）解决方案：在float的标签样式控制中加入 display:inline;将其转化为行属性备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin 实现，这就是一个必然会碰到的兼容性问题。
去除inline-block元素间间距的方法
去除inline-block元素间间距的方法在网页布局设计中，我们经常会用到display属性值为inline-block的元素。
它们具有既可以设置宽高，又可以让多个元素排列在同一行的特点，是实现网页流式布局的重要元素之一。
然而，我们在使用inline-block元素布局时，常常会遇到一个棘手的问题：它们之间会出现奇怪的间距，让布局效果不如人意。
这种间距的产生原因是inline-block元素本身会受到空格、换行符等字符的影响，使它们之间有所差异。
那么，如何去除inline-block 元素之间的间距呢？以下是几种解决方法：### 1. 处理空格字符第一种方法是去除inline-block元素之间的空格字符。
因为在HTML源码中，我们往往会将多个inline-block元素写在同一行，而这些元素之间会有空格字符。
这些空格字符会被视为一个字符宽度，导致元素之间出现间距。
因此，我们可以使用以下方法去除间距。
#### 方法一：将元素写在同一行```html<div style="display: inline-block">1</div><div style="display:inline-block">2</div>```#### 方法二：用注释消除空格字符注释会将空格字符“屏蔽”，从而去除元素之间的间距。
第二种方法是统一inline-block元素的字体大小。
因为实际上inline-block元素的高度是由字体大小决定的，而不是元素本身的高度。
如果不同的inline-block元素使用不同的字体大小，就会导致它们之间的高度不同，从而出现间距。
#### 方法三：设置相同的字体大小第四种方法是使用浮动代替inline-block布局。
因为浮动元素不受字符干扰，所以不会出现inline-block元素之间的间距。
#### 方法五：使用浮动代替inline-block```css.float {float: left;}```上述几种方法可以帮助我们去除inline-block元素之间的间距，使布局更加美观。
inline-block的简单理解
inline-block的简单理解1. 概念display:inline-block将对象呈现为inline对象，但是对象的内容作为block对象呈现。
之后的内联对象会被排列在同⼀⾏内。
⽐如我们可以给⼀个link（a元素）inline-block属性值，使其既具有block的宽度⾼度特性⼜具有inline的同⾏特性，甚⾄更多，⽐如 inline-block 元素也可以设置 vertical-align 属性。
inline-block 后的元素就是⼀个格式化为⾏内元素的块容器。
其他的内联元素可以和其显⽰在同⼀⾏，中间允许有空格。
2. 使⽤（1） display:inline-block可以⽤来处理⾏内元素不等⾼对齐排列问题（列表布局），防⽌出现过⾼元素下⽅没有元素排列，⽽是被挤到该元素的右下⽅。
（vertical-align: top/bottom;设置对齐的基准线）（2）修正IE6中浮动元素的双边距问题（3）⽔平放置多个类似块blo ck元素⽽不需要使⽤float（4）使⼀个inline元素具有⾼宽边距⽽其依然能够保持inline3. ⽔平间隙问题关于使⽤display:inline-block带来的⽔平间隙问题，产⽣该⽔平间隙的原因主要是HTML中的换⾏符、空格符、制表符等合并为空⽩符，在字体不为0的情况下，空⽩符将会产⽣⼀定的宽度，即产⽣了元素间的⽔平间隙。
解决该⽔平间隙的⽅法有：（1）字体⼤⼩设置为0，即font-size:0；此时要注意⽗元素字体⼤⼩设置后会影响到⼦元素字体⼤⼩，要记得将⼦元素字体⼤⼩重置！（2）合理地设置letter-spacing的值（负值）！（3）合理地设置word-spacing的值（负值）！（4）前⼀个标签的结束标签和后⼀个标签的开始标签连续使⽤，或者后⼀个嵌套标签的结束标签连续使⽤，不空格！合理的使⽤（1）（2）（3）（4）的css hack可以解决display:inline-block后元素间的⽔平间隙问题。
css之display属性之inline-block布局实现详解
css之display属性之inline-block布局实现详解CSS display 属性注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更⾼版本）⽀持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
所有主流浏览器都⽀持 display 属性。
定义和⽤法display 属性规定元素应该⽣成的框的类型。
说明这个属性⽤于定义建⽴布局时元素⽣成的显⽰框类型。
对于 HTML 等⽂档类型，如果使⽤ display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显⽰层次结构。
对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
注释：CSS2 中有值 compact 和 marker，不过由于缺乏⼴泛的⽀持，已经从 CSS2.1 中去除了。
默认值：inline继承性：no版本：CSS1JavaScript 语法：object.style.display="inline"1.解释⼀下display的⼏个常⽤的属性值，inline ， block， inline-blockinline（⾏内元素）:使元素变成⾏内元素，拥有⾏内元素的特性，即可以与其他⾏内元素共享⼀⾏，不会独占⼀⾏. 不能更改元素的height，width的值，⼤⼩由内容撑开. 可以使⽤padding上下左右都有效，margin只有left和right产⽣边距效果，但是top 和bottom就不⾏.block（块级元素）:使元素变成块级元素，独占⼀⾏，在不设置⾃⼰的宽度的情况下，块级元素会默认填满⽗级元素的宽度. 能够改变元素的height，width的值. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产⽣边距效果. inline-block（融合⾏内于块级）:结合了inline与block的⼀些特点，结合了上述inline的第1个特点和block的第2,3个特点.⽤通俗的话讲，就是不独占⼀⾏的块级元素。
css 产生缝隙原理
css 产生缝隙原理
CSS中的缝隙问题主要源自元素间的换行、Tab或字符间的空格，导致在显示时元素之间产生了缝隙。
具体来说，当元素被当作行内元素排版时，元素之间的空白符（空格、回车换行等）会被浏览器处理。
根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符。
在字
体不为0的情况下，空白符占据一定宽度，导致inline-block的元素之间出现空隙。
这些元素之间的间距会随着字体的大小而变化。
解决这个问题的方法有多种：
1. 给父元素设置font-size: 0，在inline-block元素上重新设置font-size。
2. 设置margin值为负。
3. 设置inline-block元素letter-space值为0，其父元素letter-space值
为负值。
4. 去掉HTML中标签段之间的空格或用注释代替空格。
5. 不设置inline-block，使用float或flex。
以上内容仅供参考，如需更多信息，建议查阅CSS相关书籍或咨询前端开发工程师。
去除inline-block 空白的方法
去除inline-block 空白的方法要去除inline-block元素之间的空白，可以采用以下几种方法：1.使用font-size: 0：可以给包裹inline-block元素的父元素设置font-size为0，然后再给每个inline-block元素重新设置合适的字体大小。
这样做的原因是当设置为0时，空白处的宽度也会变成0，从而去掉了元素之间的空白。
但是需要注意的是，如果直接放置文字内容的话，文字会变成看不见。
因此，需要给内部的文字元素设置font-size为一个合理的值。
```html<style>.parent {font-size: 0;}.child {display: inline-block;font-size: 16px;}.child span {font-size: 16px;}</style><div class="parent"><div class="child">第一个元素</div><div class="child">第二个元素</div><div class="child"><span>带文字的元素</span></div></div>```2.使用负margin：另一种方法是给包裹inline-block元素的父元素设置负margin，也可以去除元素之间的空白。
通过给元素之间添加负margin，将元素之间的空白消除。
但是，需要根据实际情况调整负margin的数值，确保元素之间的间隔是合适的。
```html<style>.parent {font-size: 0;}.child {display: inline-block;font-size: 16px;}.child + .child {margin-left: -4px; /* 调整为合适的负值 */}</style><div class="parent"><div class="child">第一个元素</div><div class="child">第二个元素</div><div class="child">第三个元素</div></div>```3.使用comments：这种方法是将inline-block元素之间的HTML注释去掉。
详解CSSdisplay：inline-block的应用
详解CSSdisplay：inline-block的应⽤本⽂详细描述了display:inline-block的基础知识，产⽣的问题和解决⽅法以及其常见的应⽤场景，加深了对inline-block应⽤的进⼀步理解。
基础知识display:inline-block是什么呢？相信⼤家对这个属性并不陌⽣，根据名字inline-block我们就可以⼤概猜出它是结合了inline和block两者的特性于⼀⾝，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，⼜保持了inline元素不换⾏的特性。
举例说明：以前我们做横向菜单列表的时候，我们可以通过li和float:left两者来实现，现在可以通过li和display:inline-block。
HTML代码：1<ul>2<li>⾸页</li>3<li>关于</li>4<li>热点</li>5<li>联系我们</li>6</ul>CSS代码1 ul, li { padding: 0; margin: 0; list-style-type: none; }2 li { display: inline-block; border: 1px solid #000; }效果图inline-block基本效果可以看到li元素可以横向排列，并且可以设置width属性，⼤家可以复制代码⾃⼰查看效果或查看inline-block的问题观察上⾯的例⼦，细⼼的同学肯定会发现，每个li之间有⼀个⼩空隙，⽽我们的代码中并没有设置margin等相关属性，这是为什么呢？默认的inline元素⾸先，我们观察⼀下默认的inline元素的表现：HTML代码1<a>⾸页</a>2<a>热点</a>CSS代码1 a { margin: 0; padding: 0; border: 1px solid #000; }效果图inline默认情况默认情况下，inline元素之间就有空隙出现，所以结合了inline和block属性的inline-block属性⾃然也有这个特点。
div与div之间有空隙的解决方法
div与div之间有空隙的解决⽅法当你使⽤HTML div块与块的中间不能紧密连接怎么都解决不了时1、可以在<head></head>中间内容⾥加⼀个* {margin:0;padding:0;}使所有块与块之间的间距为零还不与下⾯的 padding margin 冲突2、上下div之间有间距的问题我写了4个div,上下分布,均存在间距,代码以及效果如下:.div1{height:100px;background-color:blue;position:relative;}.div2 {height:100px;background-color:blueviolet;position:relative;}.div3{height:100px;background-color:red;position:relative;}.div4{height:100px;background-color:yellow;position:relative;}<body><div class="div1" ></div><div class="div2"></div><div class="div3"></div><div class="div4"></div></body>然后,我尝试在每个div中加margin:0来去掉div之间的间距,代码如下:.div1{height:100px;background-color:blue;position:relative;margin: 0;}.div2 {height:100px;background-color:blueviolet;position:relative;margin: 0;}.div3{height:100px;background-color:red;position:relative;margin: 0;}.div4{height:100px;background-color:yellow;position:relative;margin: 0;}结果效果不变,依然有间隙,如下图:接下来我进⾏了百度,找到了⼀个⽅法,设置font-size,如下代码以及效果: body{font-size:0;}.div1{height:100px;background-color:blue;position:relative;}.div2 {height:100px;background-color:blueviolet;position:relative;}.div3{height:100px;background-color:red;position:relative;}.div4{height:100px;background-color:yellow;position:relative;}上⾯代码重点添加了body{font-size:0;},其效果如下:可以看到div上下之间的间隙消除了.然⽽,最上⾯和最左⾯依然有间隙.对此,我是这么做的,添加了body{margin:0px;},代码如下:body{margin:0px;}body{font-size:0;}.div1{height:100px;background-color:blue;position:relative;}.div2 {height:100px;background-color:blueviolet;position:relative;}.div3{height:100px;background-color:red;position:relative;}.div4{height:100px;background-color:yellow;position:relative;}效果如下:可以看到,间距全部消除了.然⽽,还存在⼀个问题,就是由于设置了font-size:0;.那么会导致所有的字体消失.对此,我是这么解决的:在div中在添加div,重新设置内div的字体⼤⼩,⽐如:font-size:30px;.完美解决!3、DIV+CSS clear:both清除产⽣浮动后，会在div上⽅产⽣空隙的问题我们知道有时使⽤了css float浮动会产⽣css浮动，这个时候就需要清理清除浮动，我们就⽤clear样式属性即可实现。
css中的blockinline属性
css中的blockinline属性
css中的block / inline 属性
任何一个HTML元素都是block或者inline的。
block元素的特性包括：
总是另起一行开始显示
height, line-height, top/bottom margin属性可以被设置
width缺省值是100%,除非你指定了另外的width值
这一类的HTML元素包括<div>, <p>, <h1>, <form>, <ul> 以及 <li>等。
inline元素的特性包括：
直接跟在当前行的后面显示
height, line-height, top/bottom margin属性不能改变
width值就等于包含其中的文字/图片的宽度，并且这个值不能被改变
这一类的HTML元素包括<span>, <a>, <label>, <input>, <img>, <strong> 以及 <em>等。
你可以通过设置元素属性display: inline 或 display: block来改变元素的以上特性。
css中的block / inline 属性。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
inline-block 属性的使用随处可见，ie 从5.5 开始就已经支持display:inline-block 了，只是支持的并不是那么完美，接下来为大家详细介绍下空白间隙是如何产生的，以及解决办法，感兴趣的朋友可以参考下哈如今有很多网站都用上了inline-block 属性，比如{display:inline-block; *display:inline; * zoom:1}，以上css 代码随处可见。
很多人看见*display:inline; *zoom:1 就下意识的认为：哦，原来inline-block 这个属性ie6 和ie7 不支持。
那么ie6,7 真的不支持display:inline-block 吗？事实上，ie 从5.5 开始就已经支持display:inline-block 了，只是支持的并不是那么完美。
具体的请阅读淘宝UED官方博客——一丝所写的《display:inline-block 前世今生》。
当我们使用inline-block 的时候，就会产生“空白间隙”问题。
代码如下：复制代码代码如下:<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"/><title>inline-block</title><link rel="stylesheet" type="text/css" href="css/base.css" media="all"/><style type="text/css">li{display:inline-block;*display:inline;*zoom:1;}</style></head><body><ul><li><img src="images/cat.jpg" alt="" width="248" height="162"/></li><li><img src="images/cat.jpg" alt="" width="248" height="162"/></li><li><img src="images/cat.jpg" alt="" width="248" height="162"/></li></ul></body></html>效果图如下：我们可以看到：在ie8、chrome、firefox、opera 以及safari 浏览器下，两张图片之间有“空白间隙”。
但是在ie6 和ie7 浏览器下却正常显示，效果如下：下面我们就来说说这个“空白间隙”是如何产生的，以及解决办法。
先来说说“空白间隙”是怎么产生的？先看下源代码：复制代码代码如下:<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"/><title>inline-block</title><link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> <style type="text/css">li{display:inline-block;*display:inline;*zoom:1;}</style></head><body><ul><li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> </ul></body></html>从上面的代码我们很难发现产生“空白间隙”的问题。
其实这个问题是我们写代码的习惯所造成的。
平时我们写代码，为了使代码看上去“层级分明”，通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。
既然我们已经知道产生问题的原因了，那么就很好解决该问题。
空白符也是字符，只要是字符就会联想到字体，字体大小之类的。
所以去除空白符的存在只需要设置字体大小为零就行了（font-size:0;）。
修改已上代码：复制代码代码如下:<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"/><title>inline-block</title><link rel="stylesheet" type="text/css" href="css/base.css" media="all"/><style type="text/css">ul{font-size:0;}li{display:inline-block;*display:inline;*zoom:1;</style></head><body><ul><li><img src="images/cat.jpg" alt="" width="248" height="162"/></li><li><img src="images/cat.jpg" alt="" width="248" height="162"/></li><li><img src="images/cat.jpg" alt="" width="248" height="162"/></li></ul></body></html>可以看到在ie8，firefox，chrome 和opera 浏览器下已经没有问题了，但是在safari 浏览器下还是有问题。
关于safari 浏览器的兼容，请阅读大漠写的《如何解决inline-block元素的空白间距》。
最后整理：复制代码代码如下:<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"/><title>inline-block</title><link rel="stylesheet" type="text/css" href="css/base.css" media="all"/><style type="text/css">font-size:0;letter-spacing: -8px;/*根据不同字体字号或许需要做一定的调整*/word-spacing: -8px;}li{display:inline-block;*display:inline;*zoom:1;letter-spacing:normal;word-spacing:normal;}</style></head><body><ul><li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> <li><img src="images/cat.jpg" alt="" width="248" height="162"/></li> </ul></body></html>测试浏览器：ie6，ie7，ie8，chrome，firefox，safari，opera。