解决img的1px空白问题

实际上，这其实是inline元素搞的鬼。

第一种解决方案：把img变成块元素：display：block；

第二种解决方案：修改一下它的垂直对齐方式：vertical-align：middle；

第三种解决方案：使用浮动，让他漂浮起来：float：left；

第四种解决方案：把父元素的文字大小设置为0：font-size：0；这种方法不推荐，除非是实在想不出来办法的时候；

那么为什么会造成这样的结果的。我们不仅要知其然，更要知其所以然。

图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是你对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的间隙，也就是我们上文出现的问题了。

你！看明白了吗？

时间： 2024-11-07 03:03:41

解决img的1px空白问题的相关文章

如何解决谷歌Chrome浏览器空白页的问题

如何解决谷歌Chrome浏览器空白页的问题 谷歌Chrome浏览器突然不打开任何网页,无论是任何站点(如http://www.baidu.com), 还是Chrome浏览器的设置页面(chrome://settings/), 扩展页面 ( chrome://extensions/ ) ,  所有其他浏览器(如IE浏览器,Mozilla Firefox浏览器等)很好地工作. 这可能是由于恶意软件/病毒破坏谷歌Chrome浏览器的设置,并危及其首选项文件. 具体而言,以下问题 - 症状当您试图打开谷

解决移动端1px边框问题的几种方法

1.边框粗细原因 在移动端下设置border为1px,在某些设备上看比1px粗. 这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比. devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素. 2.解决办法 a.使用border-image实现 根据需求选择图片,然后根据css的border-image属性设置.代

如何解决inline-block元素的空白间距

转载自:http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements 有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果.前面<CSS3制作的分页导航>一文中就是使用的inline-block制作的居中效果,不过留下了一上问题,就是使用inline-block的元素之间会存

解决Android启动显示空白界面的问题

Android程序启动时,第一个看的界面并不是我们的指定的第一个Activity界面,而是显示了一个空白的界面,带标题栏的,但是界面什么内容都没有,这个界面只显示不到1秒左右的时间就会切换到我们的第一个Activity界面了,解决办法:在第一个启动的Activity的声明中增加:android:theme="@android:style/Theme.Translucent",具体代码如下(在清单文件中): <activity            android:name=&qu

关于如何解决谷歌Chrome浏览器空白页的问题

谷歌Chrome浏览器突然不打开任何网页,无论是任何站点(如http://www.baidu.com), 还是Chrome浏览器的设置页面(chrome://settings/), 扩展页面 ( chrome://extensions/ ) ,  所有其他浏览器(如IE浏览器,Mozilla Firefox浏览器等)很好地工作. 这可能是由于恶意软件/病毒破坏谷歌Chrome浏览器的设置,并危及其首选项文件. 具体而言,以下问题 - 症状当您试图打开谷歌Chrome浏览器出现: 如何解决和修复C

如何解决inline-block元素的空白间距 css 完美解决

转载W3CPLUS,链接地址:http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements 有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果.前面<CSS3制作的分页导航>一文中就是使用的inline-block制作的居中效果,不过留下了一上问题,就是使用inline-b

解决ImageView上下有空白的办法

今天在做应用的时候,发现ImageView上下有一段的地方时空白的,于是知道了这个一个属性: android:adjustViewBounds="true" 加上去就好使了,它的意思是否保持宽高比,网上说要maxWidth.MaxHeight一起使用,否则单独使用没有效果.可是我设置了也好使:又了解一个属性 android:cropToPadding 是否截取指定区域用空白代替.单独设置无效果,需要与scrollY一起使用: 下面附一张XMl属性图:

解决获取同胞元素空白节点影响的问题

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>nextSibling</title></head><body> <ul id="u1"> <li id="a"&

inline-block及解决空白间距

參考:http://www.jb51.net/css/76707.html http://www.webhek.com/remove-whitespace-inline-block/ inline-block 属性的使用随处可见,ie 从 5.5 开始就已经支持 display:inline-block 了,只是支持的并不是那么完美,接下来为大家详细介绍下空白间隙是如何产生的,以及解决办法,感兴趣的朋友可以参考下哈 去掉display:inline-block元素间的多余空白 如下一段代码,di