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和饥人谷所有,转载须说明来源

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,518评论 0 6
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,875评论 0 6
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,049评论 1 4
  • 路留一步,味让三分 退即是进,与就是得 宇宙万物,循自然之道。有生住异灭之一过程,因缘所生,有因有果。 天道于理上...
    上官玦阅读 491评论 0 1