解决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 ...
随机推荐
- [Codeforces 1005F]Berland and the Shortest Paths(最短路树+dfs)
[Codeforces 1005F]Berland and the Shortest Paths(最短路树+dfs) 题面 题意:给你一个无向图,1为起点,求生成树让起点到其他个点的距离最小,距离最小 ...
- 父进程pid和子进程pid的大小关系
如果进程ID最大值没有达到系统进程数的上限,子进程比父进程ID大.但是如果进程ID达到上限,系统会分配之前分配但是已经退出的进程ID给新进程,这样有可能出现子进程ID比父进程小.
- limux密钥对配置登陆主机
1. Linux主机免密码使用密钥登陆 这里假设主机A(192.168.0.113)用来远程连接主机B(192.168.0.186) 在主机A上执行如下命令来生成配对密钥:ssh-keygen -t ...
- sql认识
DDL – Data Definition Language数据定义语言DML – Data Manipulation Language数据操作语言DCL – Data Control Languag ...
- java学习笔记(5)多线程
一.简介(过段时间再写,多线程难度有点大) --------------------------------------- 1.进程:运行时的概念,运行的应用程序 2.线程:应用程序内部并发执行的代码 ...
- 关于KMeans和range的使用
#!/usr/bin/python#-*-coding:utf-8-*-import numpy as npfrom sklearn.cluster import KMeansfrom scipy.s ...
- ajax异步 —— javascript
目录 ajax是什么 原生ajax jquery ajax ajax跨域 ajax是什么 作用:不必重新加载整个页面,更新部分页面内容. 大概使用过程:通过后台提供的数据接口,ajax获取数据,动态修 ...
- java 判断5张牌的组成
题目: 一副牌中发五张扑克牌给你,判断是四条,三带二.三带一加一.两对.一对.顺子.还是什么都不是. 控制台输入: 1,1,1,1,2 示例输出: 四条 Java方法的代码: static Strin ...
- phpstorm 快捷键2
1.跨平台. 2.对PHP支持refactor功能.支持断点调试,支持 Symfony2 和 Yii 的 MVC 视图 3.自动生成phpdoc的注释,非常方便进行大型编程. 4.内置支持Zencod ...
- [转载]一个支持Verilog的Vim插件——自动插入always块
原文地址:一个支持Verilog的Vim插件--自动插入always块作者:hover 插件支持always块的自动插入,如果用户要插入时序always块,需要在端口声明中标志时钟和异步复位信号(仅支 ...