img图片之间的间距问题
【问题】页面中如果有多张图片,那么图片之间会有一些间距,在某些情况下(如切好的图片再次拼接),在显示上就会出现一些问题。效果如下:
对应代码:
- <div class="f0">
- <img src="data:images/1.png" >
- <img src="data:images/2.png" >
- <img src="data:images/3.png" >
- </div>
【问题分析】
这个是浏览器的一个设计问题。
1.img本来是行内元素,却可以用width 和height,当父元素没有设置高度的时候,用子元素们的高度计算出的高度给父元素的时候就会出现3px空隙这类的问题。
2.img图片默认排版为 inline-block;而所有的inline-block元素之间都会有空白。
【解决方法】
方法一:
将img显示设置成 display:block;
因图片横向排列,同时设置向左浮动,样式代码如下:
- .f0 img{
- width: 150px;
- display: block;
- float: left;
方法二:
将父容器字体大小设为零。font-size:0;
- div.f0 {
- font-size: 0;
- }
方法三:
去掉<img>标签之间的空格,将所用的<img>标签书写在同一行(即各个img标签之间不留空格),无须设置其他样式。
- <div class="f0">
- <img src="data:images/1.png"><img src="data:images/2.png"><img src="data:images/3.png">
- </div>
效果:
【小问题】如果在样式中引用了bootstrap.css并且为图片设置了"img-rounded"类,
并且根据上述的方法设置样式,则在图片之间会出现1px左右的缝隙。如下:
【示例完整代码】
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <style>
- body{
- background: #dedede;
- padding: 5% 5%;
- margin: 0;
- }
- div.f0{
- font-size: 0;
- }
- div.f0 img{
- width: 150px;
- display: block;
- float: left;
- }
- .f0 img{
- width: 150px;
- float: left;
- display: block;
- }
- </style>
- <body>
- <div class="f0">
- <img src="data:images/1.png">
- <img src="data:images/2.png">
- <img src="data:images/3.png">
- </div>
- </body>
- </html>
相关问题更多方案讨论参考:
http://www.w3cfuns.com/article-5597087-1-1.html
http://www.dynamicdrive.com/forums/showthread.php?24880-White-space-between-lt-li-gt-items
img图片之间的间距问题的更多相关文章
- 【转载】img图片之间的间距问题
[问题]页面中如果有多张图片,那么图片之间会有一些间距,在某些情况下(如切好的图片再次拼接),在显示上就会出现一些问题.效果如下: 解决方案参看以下文章 img图片之间的间距问题
- UIScrollView浏览一组图片,且图片与图片之间有间隔
---恢复内容开始--- UIScrollView是可以浏览一组view的,只要将其属性 pagingEnabled设置为true就可以了.具体过程是这样的, 1:将一组图片按照从左到右的顺序添加到U ...
- [Android Pro] PullToRefreshListView怎么设置各个item之间的间距
reference to : http://blog.csdn.net/qq_25943493/article/details/50923895 要设置第三方的上拉下载listView的item之间 ...
- fontsize可以解决img标签插入图片之间的缝隙
当我们用img标签连续插入多张图片的时候,图片和图片之间会出现缝隙,通常我们的做法是用DIV将图片包起来进行浮动来解决这个问题,但是还有一种解决方法是在img的父级元素里面设置font-size:0来 ...
- 去除行内(inline/inline-block)元素之间的间距
先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...
- 如何去除内联元素(inline-block元素)之间的间距(转载)
如何去除内联元素(inline-block元素)之间的间距 前几天写一个专题页 div{width:900px;}div a{ display:inline-block; width:300px; ...
- iOS设置tableViewCell之间的间距(去掉UItableview headerview黏性)
经常在项目中遇到自定义cell的情况,而且要求cell之间有间距,但是系统没有提供改变cell间距的方法,怎么办? 方法1:自定义cell的时候加一个背景View,使其距离contentView的上下 ...
- canvas和图片之间的互相装换
canvas和图片之间的互相装换 一.总结 一句话总结:一个是canvas的drawImage方法,一个是canvas的toDataURL方法 canvas drawImage() Image对象 c ...
- 两个button之间的间距如何去掉
在外层加上一个父元素,设置font-size:0;即可. 两个按钮之间的间距如何去掉
随机推荐
- Designing CSS Layouts With Flexbox Is As Easy As Pie
This article is an updated excerpt of the chapter “Restyle, Recode, Reimagine With CSS3″ from our Sm ...
- 【COGS】714. USACO 1.3.2混合牛奶(贪心+水题)
http://cojs.tk/cogs/problem/problem.php?pid=714 在hzwer的刷题记录上,默默地先跳过2题T_T...求凸包和期望的..T_T那是个啥..得好好学习 看 ...
- 【wikioi】1403 新三国争霸(dp+kruskal)
http://wikioi.com/problem/1403/ 一开始的确感觉和bzoj1003很像,不同的是这里还要求联通,求最小的边. 我们可以想到用最小生成树(为嘛我自己想不到呢..) 我们可以 ...
- POST模拟百度登录和自动发帖
这里用HttpClient发包模拟百度登录和发帖,验证码部分采用机器下载人工识别. 登陆百度的原理:1. 访问https://passport.baidu.com/v2/api/?getapi& ...
- MySQL索引分析与优化
1.MySQL能够在name的索引中查找“Mike”值,然后直接转到数据文件中相应的行,准确地返回该行的 peopleid(999).在这个过程中,MySQL只需处理一个行就可以返回结果.如果没有“n ...
- log4j - 配置文件
Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息. 通过配置,可以创建出Log4J的运行环 ...
- shenyi 语录
[讲师]沈逸(65480539) 2016-06-08 14:58:42 会centos 转redhat是分分钟的事 [讲师]沈逸(65480539) 2016-06-08 14:58:54 查看 ...
- 《GK101任意波发生器》升级固件发布(版本:1.0.2build539)
一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.2.build539 编译日期:2014-10-08 ====================================== 二. ...
- 【新产品发布】【iCore2 ARM / FPGA 双核心板】
iCore2是一款包含ARM / FPGA两大利器的双核心板.ARM方面,采用意法半导体高性能的32位Cortex-M3内核STM32F103VE微处理器,主频达72MHz,并包含丰富外设接口.FPG ...
- Codeforeces 707B Bakery(BFS)
B. Bakery time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...