inline-block特性及如何解决去除缝隙

特性：

内联块元素即具有行内元素特性又具有块级元素的特性：
（1）元素之间可以水平排列
（2）可以当做一个块级元素来设置各种的属性，例如：width、height、padding等。

去除缝隙的方法：

Paste_Image.png

1.去掉元素标签之间的空格和换行

写法1

写法2

方法3

2.取消标签闭合

Paste_Image.png

3.在父容器上使用font-size: 0;

Paste_Image.png

inline-block怎么设置顶端对齐，使用vertical-align： top;

未设置前

设置后

补充：
如果文本与图片在同一行中，那么将来文字与图片的默认对齐方式是文字的基线对齐图片的底线。
vertical-align: middle；（设置文本与图片的对齐方式）

Paste_Image.png

文本与图片顶端对齐

文本与图片的底端对齐

文章著作权归饥人谷_sunny和饥人谷所有，转载须说明来源