2019-01-30小程序图片有空隙

1、将图片转换为块级对象

 image {
      display:block;
  }

2、设置图片的垂直对齐方式

   image {
      vertical-align: top;
      vertical-align: text-top;
      vertical-align: bottom;
      vertical-align: text-bottom;
  }

3、设置父对象的文字大小为0px

即,在外层盒子添加font-size:0;
可以解决问题。但这也引发新的问题,在父对象中的文字都无法显示。就算文字部分被被子元素对象括起来,设置了子对象文字依然可以显示,但在css校验的时候会提示文字过小的错误。

image {
      font-size: 0;
  }

4、改变父对象的属性

如果父对象的宽、高固定、图片大小随父对象而定,那么可以设置:overflow:hidden;
父元素.send

  .send {
      width: 180px;
      height: 30px;
      overflow: hidden;
  }

5、设置图片的浮动属性

即 在image中增加float:left;
如果要实现图文混排,这种方法是很好的选择

 image {
      float: left;
  }

6、父元素添加 display:flex;flex-direction:column;

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,068评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,798评论 0 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,650评论 1 45
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,513评论 0 6