`<img>`放到`<div>`中底部出现空隙以及解放方案.

张润昊 2024-09-29 17:55:34 原文

形成情况:

外部的
不设置宽高, 由内部图片撑开
撑开后, 底部会有空隙

问题原因:

div元素中的行内元素的默认vertical-align对齐方式是基线baseline
img是行内元素, 所以会与基线对齐, 造成底下的空隙

解放方法:

img标签转换为块级元素: display: block
设置外层div的字体大小为0, font-size: 0
设置img垂直方向的对齐方式, 只要是其他三种皆可,
- vertical-align:bottom，
- vertical-align:middle，
- vertical-align:top

`<img>`放到`<div>`中底部出现空隙以及解放方案.的更多相关文章

js放到head中失效的原因与解决方法

1.今天写js碰到一个奇怪的问题,写好的js放到body里面执行,但是放到head中没有任何效果,为什么导致这种原因呢? 看失效代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

NodeJS写个爬虫，把文章放到kindle中阅读

这两天看了好几篇不错的文章,有的时候想把好的文章 down 下来放到 kindle 上看,便写了个爬虫脚本,因为最近都在搞 node,所以就很自然的选择 node 来爬咯- 本文地址:http://w ...

如何让图片在垂直方向与 div的底部对齐水平居中

需要图片的绝对定位postion: absolute. 一般定位时, 是用div去定位. 一般不直接用非div去"绝对/相对"定位. 如不直接用等去定位. 因为这些好像不好定位 ...

div中字垂直居中对齐

div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...

div中的字符换行

div中的字符换行转载自:http://blog.sina.com.cn/s/blog_6a79bc480100tizi.html 1.强制不换行,同时以省略号结尾. <div style ...

【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）

今天开发项目中碰到一个li在IE中的BUG,先来看设计原型(如图:) 两个红色中间是<li>1px的底边框: 我写的代码如下: ============================== ...

vue setTimeout用法 jquery滚动到某一个div的底部

//vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...

div中的内容超过容器宽度的问题

问题描述: <div class="category"> <div class="column-a">排名</div> ...

一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部

前言今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

随机推荐

DCOS之Mesos-DNS介绍

DCOS的Mesos-DNS它主要提供域名解析服务,Mesos-DNS 在DCOS框架中支持服务发现,同意应用程序和服务通过域名系统(DNS)来相互定位.DCOS中的 Mesos-DNS充当的角色和在 ...

Mac OS用vmvare安装多节点kubernetes

参考网址 https://kubernetes.io/docs/setup/ 1.安装vmvare 2.下载ubuntu镜像(可以不要界面,可以下载server版大约900M,否则下载desktop版 ...

Xamarin.Android 记事本（一）

导读 1.视图及数据库的创建 2.listview数据绑定 3.listview的点击事件正文如何创建一个listview,大家可以看这里,基本流程操作是一模一样的,我就不多说了,然后就是新建一个 ...

querying rpm database

Call dbMatch on a transaction set to create a match iterator. As with the C API, a match iterator al ...

Lambda 闭包匿名函数类

深入理解Java 8 Lambda(语言篇——lambda,方法引用,目标类型和默认方法) - _Luc_ - 博客园 https://www.cnblogs.com/figure9/p/java-8 ...

主线程 view

参考https://blog.csdn.net/u011001142/article/details/50912358

SQL Server 数据库备份策略，第一周运行失败的原因

一般生产库,采用每10分钟备份Log,每天备份Diff,每周备份Full的策略. 同时存在异地备份.异地备份可使用SQL Server本身的cmdshell存储过程,调用系统命令. 在为新数据库,建 ...

知识点三:数据表相关操作(5,7-22) --------------------------------整型--------------------------------- --测试整型 CREA ...

JAVA MAIL基本功能

1. [代码][Java]代码package emailrobot; import java.io.*;import java.text.*;import java.util.*;import jav ...

[Selenium] 使用Chrome Driver 的示例

//导入Selenium 库和 ChromeDriver 库 pachage com.learningselenium.simplewebdriver; import java.util.concur ...

`<img>`放到`<div>`中底部出现空隙 以及解放方案.

形成情况:

问题原因:

解放方法: