display:inline-block 间距问题

一 、左右间距问题

.h-div{
	width:100px;
	height: 50px;
	background: plum;
	border: 1px solid darkslateblue;
	display: inline-block;
}

这里写图片描述

常用解决方案:
1.去掉标签中的换行
个人觉得是最优方案,从根本解决问题,或者同理直接将其写在同一行。

2.margin的负值
缺点:在不同的分辨率下,margin-left的取值不同,不建议使用。

.h-div{
    margin-left: -5px;
 }

3.font-size
缺点:兼容性不够好,
在14寸(1360768)上,Safari没有用
在15.4寸(1800
2880)Mac上,Safari和chrome均可以
缺点2:
会将内部元素的font-size也变成0,需要内部再设置font-size,麻烦!

.h{
	font-size: 0;
}
.h-div{
	font-size: 14px;
}

4.其他如letter-spacing、word-spacing都依赖了负值像素,同分辨率下
ie、Safari、chrome均可行,但不同分辨率显示器可能还是会有差异。

二、上下不居中问题

.v-div{
	width:100px;
	height: 50px;
	background: pink;
	border: 1px solid hotpink;
	display: inline-block;
	vertical-align: bottom;
}

这里写图片描述
display:inline-block,是基于baseline对齐的,同一行的元素高度不同,会导致上下不齐。
常用解决方案:
设置vertical-align属性:

v-div{
	vertical-align: middle;
}

这里写图片描述

v-div{
	vertical-align: top;
}

这里写图片描述

你可能感兴趣的:(Html)