inline-block本身会自带空隙或者block块级元素和其他元素之间因为空白而产生间隔。
容器设置font-size:0子容器再设置font-size即可
如:
html结构举例:<div id="box">
<div>后面的span换行有空隙可根据下面的css设置修正</div>
<span>测试</span>
</div>
css举例:
#box{font-size:0}
#box div{font-size:14px}
#box span{font-size:12px}
1.在文件夹中创建一个“test”的html文件。如图所示
2.在里面添加html标签框架。如图所示
3.在里面添加一个“div”并放入文字。如图所示
4.然后我们发现默认文字之间比较紧凑。如图所示
5.现在我们给div设置一个id为“wd”。如图所示
6.通过css在style使用letter-spacing给wd中的文字设置字间距为30px。#wd{letter-spacing:30px}如图所示
7.在浏览器中打开我们发现字间距变大了。如图所示
太久没用的东西,偶然用到,竟然忘记了,所以记录一下,加深一下印象
图片和行内块元素默认底线会和父级盒子的基线对齐,因此就会产生白色缝隙。
1.用vertical-align:middle | top| bottom等,让图片不和基线对齐。
上面3中对齐方式都可以
vertical-align不影响块级元素中的内容对齐,它只针对于行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片/表单与文字的对齐。
2.将img通过display: block转为块级元素。
转为块级元素之后,就不存在和父级盒子基线对齐的问题了。