解决img标签与其它标签间隙问题？
解决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标签与其它标签间隙问题？的更多相关文章
- 解决AngularJS和Django模板标签冲突问题
原地址 Django和AngularJS在模板中使用同样的符号来引用变量,例如 {{variable_name}}. 有两种解决办法,各有利弊.一个修改AngularJS模板语法,另一个使用Djang ...
- 解决IE8不支持html5标签最好解决办法？
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法:HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显 ...
- 如何自定义JSTL标签与SpringMVC 标签的属性中套JSTL标签报错的解决方法
如何自定义JSTL标签 1.创建一个类,从SimpleTagSupport继承 A) 通过继承可以获得当前JSP页面上的对象,如JspContext I) 实际上可以强转为PageContext II ...
- 解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...
- js 父子标签同时设置onclick，子标签触发父标签onclick解决办法
js 父子标签同时设置onclick,子标签触发父标签onclick 或 子标签为a 先触发onclick 再触发 a 的 href: 解决方案:在子标签的onclick里写 var ev = win ...
- 【转】object标签和embed标签
我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少人了解这些直接由DW生成的代码呢?其实我接触flash player标 ...
- JS点击任意标签获得该标签属性，以获得ID为例，以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别
js代码: //$(document).click(function (e) { // 在页面任意位置点击而触发此事件 // var select = ""; // var i = ...
- IE浏览器下a标签嵌套img标签默认带有边框
最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
随机推荐
- dp入门题（数塔）
http://acm.hdu.edu.cn/showproblem.php?pid=2084 题意: 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 在上 ...
- nginx配置本地域名反向代理实现本地多域名80访问
什么是反向代理? 代理:通过客户机的配置,实现让一台服务器代理客户机,客户的所有请求都交给代理服务器处理. 反向代理:用一台服务器,代理真实服务器,用户访问时,不再是访问真实服务器,而是代理服务器. ...
- Bug快到碗里来
Bug快到碗里来 python错误--'list' object is not callable 原因及解决方法1 你定义了一个变量的变量名和系统自带的关键字冲突,调用变量时关键字被传到调用的位置,就 ...
- limux密钥对配置登陆主机
1. Linux主机免密码使用密钥登陆 这里假设主机A(192.168.0.113)用来远程连接主机B(192.168.0.186) 在主机A上执行如下命令来生成配对密钥:ssh-keygen -t ...
- [Vue] vuex-interview
1.你有使用过 vuex 的 module 吗?主要是在什么场景下使用? 把状态全部集中在状态树上,非常难以维护. 按模块分成多个 module,状态树延伸多个分支,模块的状态内聚,主枝干放全局共享状 ...
- js中过滤在输入框中过滤掉特殊表情
在页面输入text 时,经常会出现某些特殊符号例如:❤
- linux 配置环境变量三种方式
一:用于当前终端: export PATH=$PATH:<你的要加入的路径> 此方式仅用于当前终端,一旦该终端关闭,则配置失效 二:用于当前用户: vi ~/.bashrc 然后加入:ex ...
- LDP - Linux文档工程的简介,包括帮助,向导和文档
总览 SYNOPSIS Linux文档工程(LDP)为Linux社区提供多种自由文档资源,包括向导 (guide),常见问答 (FAQ),入门 (HOWTO) 以及手册页 (man-pages). 作 ...
- MATLAB中的函数句柄及其应用
1.函数句柄的创建 函数句柄(function handle)是MATLAB中的一类特殊的数据结构,它的地位类似于其它计算机语言里的函数对象(Javascript,Python),函数指针(C++), ...
- oracle查询语句执行顺序
完整的查询语句类似是这样的: select ..., ROWNUM from table where <where clause> group by <columns> hav ...