解决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. c++实现直接插入排序

    基本概念 直接插入排序是一种最简单的排序方法,排序过程为:先将第一个元素看作是只有一个元素的有序子表,然后从第二个元素开始,将待排序元素依次插入到前面有序的子表中,直到全部排序完毕.在整个过程中,前面 ...

  2. numpy-添加操作大全

    合并 hstack(tup):按行合并 [前面有个 h,可以理解为 行,这样方便记忆] vstack(tup):按列合并 参数虽然是 tuple,但是 list 也行,可以合并2个或者多个数组. a= ...

  3. jupyter notebook 使用多个python环境

    conda install nb_conda_kernels 执行上面的命令,然后启动notebook就可以选择conda中的所有环境了

  4. Bloom 过滤器

    待续... package com.ghc.mmall.concurrency.nio; import com.google.common.hash.BloomFilter; import com.g ...

  5. 完整阿里云Redis开发规范

    完整阿里云Redis开发规范 原文地址 本文主要介绍在使用阿里云Redis的开发规范,从下面几个方面进行说明. 键值设计 命令使用 客户端使用 相关工具 删除bigkey 通过本文的介绍可以减少使用R ...

  6. NSUserDefaults的用法

    NSUserDefaults适合存储轻量级的本地数据,比如要保存一个登陆界面的数据,用户名.密码之类的,个人觉得使用NSUserDefaults是首选.下次再登陆的时候就可以直接从NSUserDefa ...

  7. CDN杂谈

    两大cdn公司:一个是Akamai,一个是LimeLight,所以有两个阵营 CDN在利用DNS的转授权来引导最终访问者找到最理想的缓存或者镜像点,他是一种基于域名的服务.在不同的实现方式下,最终的定 ...

  8. 【转】Android编译系统详解(一)——build/envsetup.sh

    出处 http://www.cloudchou.com/android/post-134.html 本文原创作者:Cloud Chou. 欢迎转载,请注明出处和本文链接 准备好编译环境后,编译Rom的 ...

  9. python virtualenv和virtualenv的使用

    首先下面的步骤我都是在windows下执行,Python2.7,pip==19.1.1 1.安装virtualenv pip install virtualenv 2.新建virtualenv vir ...

  10. Python excel读写

    # coding=utf-8 print "----------------分割线 xlrd--------------------" import xlrd #打开一个wordb ...