html中两个块之间有空隙,css标签之间引发空隙问题解决办法

首先看这段空隙对应的源代码如下

代码看起来没有任何问题，那么问题真的来了：

空隙去哪里了啊？

问题原因：

图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离(这个距离和 font-size，font-family 相关，不一定是 5px)，所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。

解决方案：

将图片display: block

设置img为“display:block;”。在本例中添加一组CSS代码：“img {display:block;}”。比较常用的做法。

设置图片的对齐方式

即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决

设置图片的父级对象文字大小为0px

“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

设置图片的浮动

即在本例中增加一行CSS代码：“#sub img {float:left;}”。如果要实现图文混排，这种方法是很好的选择。

各种做法自行考量，我偏向于设置浮动或块显示，有些人偏向于使用vertical-align进行解决。

html中两个块之间有空隙,css标签之间引发空隙问题解决办法相关推荐

JSP页面中使用JSTL标签出现无法解析问题解决办法
JSP页面中使用JSTL标签出现无法解析问题解决办法参考文章: (1)JSP页面中使用JSTL标签出现无法解析问题解决办法 (2)https://www.cnblogs.com/xdp-gacl/p ...
html中li标签之间有缝隙,liimg标签之间空隙bug
QQ截图20181220095051.png 解决: 一.将图片转换为块级对象即,设置img为"display:block;".在本例中添加一组CSS代码: .blist_ite ...
Java基础_17 | Java多线程程序设计（Java中两种创建线程的方法、多线程之间的同步和互斥）
1. 多线程实现最核心的机制一个程序在其执行过程中, 可以产生多个线程, 形成多条执行线索.,每条线程,有产生.存在和消亡的过程,并且独立完成各自的功能,互不干扰. 多线程程序运行只占用一个CPU, ...
关于unity 中使用AssetBundle加载资源，shader偶尔会丢失的问题解决办法
问题描述: 因为项目中要进行热更新设计,所以用unity官方推荐的打包方式assetbundle进行打包,打包好了以后再电脑上运行正常,但是当发布到android上后发现偶尔场景背景会出现空白,多方查 ...
在Eclipse中编写servlet时出现The import javax.servlet cannot be resolved 问题解决办法
在Eclipse中,project->properties,选择Java Build Path->Libraries->Add External JARs,找到你计算机中tomcat ...
去除java接口返回值中含有的html、js、css标签，获取纯文字
现在在做政府网站,网站里有很多公开信息和政务咨询的新闻,现在需要做新闻的RSS订阅功能,其中有一项是需要处理文章页的内容.我们后台添加编辑文章使用的是编辑器,文章内容会带有很多html标签和css样式 ...
java去除html代码中含有的html、js、css标签，获取文字内容
现在在做政府网站,网站里有很多公开信息和政务咨询的新闻,现在需要做新闻的RSS订阅功能,其中有一项是需要处理文章页的内容.我们后台添加编辑文章使用的是编辑器,文章内容会带有很多html标签和css样式 ...
获取Moment Js中两个日期之间的小时差异
本文翻译自:Get hours difference between two dates in Moment Js I'm able to get the difference between two ...
Joda-Time中两个日期之间的天数
本文翻译自:Number of days between two dates in Joda-Time How do I find the difference in Days between two ...
C语言 —— 获取字符串中两个字符之间的的数据
问题描述:获取字符串中两个字符之间的数据.最近写SMTP代理,需要获取发送方与接收方的邮件名称. 字符串为 "MAIL FROM:<test1@163.com>\r\n" ...

html中两个块之间有空隙,css标签之间引发空隙问题解决办法

html中两个块之间有空隙,css标签之间引发空隙问题解决办法相关推荐

最新文章

热门文章