img 图片底部会有白色区域

jackzou 发布于2019-08-01 15:00 / 2615人阅读

摘要：当对齐的时候下方会有的空隙。解决方法方法一原理通过把标签改为区块方法二原理通过把标签的元素的默认值修改为

原因：

标签是分成 区块 和 内联块 2种

    一个标签显示一行的称为 区块，如（段落P，标题H系列，DIV等）    
    若标签能在一行显示N个，表明此标签为 内联块，如（,,）
    区块和内联块最大的区别就是，区块可以设置宽、高、居中对齐等操作，而内联块不行

img 标签 是inline 元素， inline元素默认是baseline对齐的。当baseline对齐的时候 下方会有4px 的空隙。

解决方法：

方法一：display: block;
       原理：通过把img标签改为区块
       
方法二：vertical-align: bottom
       原理：通过把img标签的inline元素的默认值修改为buttom

服务器托管混合云图片元素img php显示图片img html图片居底部 html 图片距底部

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49700.html

关于移动端适配，你必须要知道的

摘要：需要注意，上面的尺寸都是屏幕对角线的长度英寸缩写为在荷兰语中的本意是大拇指，一英寸就是指甲底部普通人拇指的宽度。由于手机尺寸为手机对角线的长度，我们通常使用如下的方法计算的为那它每英寸约含有个物理像素点。导读移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案横屏适配高清屏图片模糊问题 ... ...

IntMain 2019-08-30 10:55 评论0 收藏0
关于移动端适配，你必须要知道的

摘要：需要注意，上面的尺寸都是屏幕对角线的长度英寸缩写为在荷兰语中的本意是大拇指，一英寸就是指甲底部普通人拇指的宽度。由于手机尺寸为手机对角线的长度，我们通常使用如下的方法计算的为那它每英寸约含有个物理像素点。导读移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案横屏适配高清屏图片模糊问题 ... ...

lufficc 2019-08-26 13:48 评论0 收藏0
vertical-align 和 line-height | 垂直居中

摘要：垂直居中当设置此时的页面看似垂直居中，但是并没有完全垂直居中。中线位置字符的中心并不是字符内容的绝对居中位置。这种通过定高，元素垂直居中的方法不仅适用于现代浏览器，连浏览器也是支持的。今天在写样式时，icon和文字都进行了垂直居中的处理，但是icon并没有垂直居中，后来发现由于 line-height 和 vertical 一起使用导致与预期样式不同，特此对 vertical-ali...

ybak 2019-08-30 15:56 评论0 收藏0
VUE实例图解

摘要：案例品牌列表构建基本结构利用的样式数据要双向更新，所以要用到，同时在后面的中要进行初始化为添加按钮绑定事件的中，绑定值为关键字删除标签绑定函数，传入参数的时候，需要用括号事件修饰符，表示阻止默认事件实例对象新建一个实例函数中初始化需要双向 VUE案例品牌列表构建基本结构利用bootstrap的样式 showImg(https://segmentfault.com/img/bVbf...

wqj97 2019-08-23 11:27 评论0 收藏0