解决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（不要62）
http://acm.hdu.edu.cn/showproblem.php?pid=2089 题意:求区间内满足以下条件的数量 1.数位不能出现4,2.任意两相邻数位不能是62. 解法:数位dp[po ...
- c# 模拟post登录
使用模拟登录大致可以分为两步 一.post登录获取cookis public CookieContainer GetCookie(string url,string account,string pa ...
- vue使用Vuex, IE浏览器报错
错误: [vuex] vuex requires a Promise polyfill in this browser. 原因:因为使用了 ES6 中用来传递异步消息的的Promise,而IE低版本 ...
- Vue中的组件直接的通信是如何实现的
组件关系可分为父子组件通信.兄弟组件通信 1.父组件传子组件 通过props属性来实现 2.子组件传父组件 子组件用$emit()来触发事件,父组件用$on()来监听子组件的事件 3.兄弟之间的通信 ...
- 深入理解Java的反射机制
https://blog.csdn.net/u012585964/article/details/52011138 http://www.importnew.com/20339.html 一,java ...
- WPF C# 字符串读写文件
WPF C# 字符串读写文件 public class 字符串读写文件 { /// <summary> /// Encoding.Unicode.GetString 如果使用Encodin ...
- java面试题全集(中）
这部分主要是与Java Web和Web Service相关的面试题. 96.阐述Servlet和CGI的区别? 答:Servlet与CGI的区别在于Servlet处于服务器进程中,它通过多线程方式运行 ...
- 独家！三代Ryzen国行价格来了：12核3999
5月27日,AMD在2019台北电脑展COMPUTEX展前新闻发布会上举行主题演讲,AMD CEO苏姿丰登台,正式发布了第三代Ryzen锐龙处理器,新品共有3款,分别是Ryzen 7 3700X.Ry ...
- git 命令解析
git 补丁 Git 提供了两种补丁方案: (1)用 git diff 生成的UNIX标准补丁.diff文件:.diff文件只是记录文件改变的内容,不带有commit记录信息,多个commit可以 ...
- web框架-（六）Django补充---form表单验证
一.form表单验证 1. 常规html页面的form表单验证 常规页面中,如果想实现对表单中用户输入信息的数据验证,需要配合Ajax来实现. 使用前我们先来熟悉下函数参数:request,其中包含的 ...