解决img标签间距问题


关于img标签间距问题:多个img之间有间距,包含img标签的div之间有间距

代码如下:

<!DOCTYPE html>
<html> <head>
<style>
*{
margin: 0;padding: 0;
}
.content-wrapper{
padding: 30px;
height: 100px;
background-color: black;
color: white;
}
.avatar{
display: inline-block;
}
.avatar img{
width: 60px;
height: 70px;
}
.content{
display: inline-block; }
.brand{
font-size: 12px;
display: block;
}
</style>
</head> <body> <div class="content-wrapper">
<div class="avatar">
<img src="1.jpeg">
</div>
<div class="content">
<span class="brand">前端小智</span>
<span class="brand">前端爱好者</span>
<span class="brand">终身学习者</span>
</div>
</div>
</body> </html>

效果图如下:

从效果图片可以看出图片与span标签有间隙

产生原因是由于html里面有空白字符引起的.

既然知道了是空白字符引起的,注意空白字符也是文字的内容,所以我们可以用以下方法解决:

如上图,我们可以在父亲窗口上设置字体大小 为0, 然后在对应的子窗口设置字体就可以清除空隙了,

最终效果如下:

img标签与img标签之间也会间隙,同理设置父亲窗口上设置字体大小 为0, 然后在对应的子窗口设置字体就可以啦

愿你成为终身学习者

解决img标签与其它标签间隙问题?的更多相关文章

  1. 解决AngularJS和Django模板标签冲突问题

    原地址 Django和AngularJS在模板中使用同样的符号来引用变量,例如 {{variable_name}}. 有两种解决办法,各有利弊.一个修改AngularJS模板语法,另一个使用Djang ...

  2. 解决IE8不支持html5标签最好解决办法?

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法:HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显 ...

  3. 如何自定义JSTL标签与SpringMVC 标签的属性中套JSTL标签报错的解决方法

    如何自定义JSTL标签 1.创建一个类,从SimpleTagSupport继承 A) 通过继承可以获得当前JSP页面上的对象,如JspContext I) 实际上可以强转为PageContext II ...

  4. 解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  5. js 父子标签同时设置onclick,子标签触发父标签onclick解决办法

    js 父子标签同时设置onclick,子标签触发父标签onclick 或 子标签为a 先触发onclick 再触发 a 的 href: 解决方案:在子标签的onclick里写 var ev = win ...

  6. 【转】object标签和embed标签

    我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少人了解这些直接由DW生成的代码呢?其实我接触flash player标 ...

  7. JS点击任意标签获得该标签属性,以获得ID为例,以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别

    js代码: //$(document).click(function (e) { // 在页面任意位置点击而触发此事件 // var select = ""; // var i = ...

  8. IE浏览器下a标签嵌套img标签默认带有边框

    最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!

  9. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

随机推荐

  1. 作业调度框架Quartz.NET-现学现用-01-快速入门 - 简书

    原文:作业调度框架Quartz.NET-现学现用-01-快速入门 - 简书 前言 你需要应用执行一个任务吗?这个任务每天或每周星期二晚上11:30,或许仅仅每个月的最后一天执行.一个自动执行而无须干预 ...

  2. OpenCV处理文件、视频和摄像头

    图像的本质(图像可以用数组来表示) import numpy as np import cv2 img = np.zeros((3, 3), dtype=np.uint8) print(img, im ...

  3. crm客户资源显示控制

    为便于员工之间的良性竞争,避免恶意挖客户,对于不同的登录用户,在客户列表中只显示当用用户自己所拥有的客户列表. ---具体的,通过在列表显示界面的列表查询语句中增加根据用户id查询其对应的客户资源的条 ...

  4. String转int,int转String

    String转int 1) int i = Integer.parseInt([String]);  int i = Integer.parseInt([String],[int radix]); 2 ...

  5. vue单页应用中根据不同城市不同业务添加百度统计代码

    问题描述: 我们知道一般的百度统计代码是添加在html的head里的:但是,因为目前项目是用vue开发的单页应用,所以在路由跳转之间不会刷新页面, 统计代码如果放在项目里的index.heml的hea ...

  6. express做登录判断

    1)JWT试试 https://github.com/penguinab/express-jwt 2)express session https://github.com/whevether/reac ...

  7. ABAP JSON转换

    REPORT ztest_json. DATA: json_ser TYPE REF TO cl_trex_json_serializer, json_des TYPE REF TO zcl_trex ...

  8. php set_magic_quotes_runtime() 函数过时解决方法

    PHP5.3中 bool set_magic_quotes_runtime ( bool $new_setting )函数过时.把函数: set_magic_quotes_runtime($newse ...

  9. web框架-(七)Django补充---models进阶操作及modelform操作

    通过之前的课程我们可以对于Django的models进行简单的操作,今天了解下进阶操作和modelform: 1. Models进阶操作 1.1 字段操作 AutoField(Field) - int ...

  10. 如何通过Samba共享Linux文件夹

    https://blog.csdn.net/stu059074244/article/details/77766155   Samba(SMB是其缩写) 是一个网络服务器,用于Linux和Window ...