解决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. Python 入门之 软件开发规范

    Python 入门之 软件开发规范 1.软件开发规范 -- 分文件 (1)为什么使用软件开发规范: 当几百行--大几万行代码存在于一个py文件中时存在的问题: 不便于管理 修改 可读性差 加载速度慢 ...

  2. Maven出错的问题处理

    1:使用Maven部署dubbox.jar包到maven本地仓库 由于Dubbox的jar包并没有部署到Maven的中央仓库中,大家在Maven的中央仓库中可以查找到Dubbo的最终版本是2.5.3 ...

  3. 匿名函数lambda和map函数

    一.map函数,实现迭代操作 map(f1,x) f1为函数的名称(不加括号),x为map的参数,示例如下: def add(a): return a+10 print map(add,[1,2,3] ...

  4. win10 powershell禁止运行脚本解决

    win10 现在默认策略为 Restricted 该策略情况下是禁止在终端下运行脚本文件的,所以我们想要通过powershell 来运行我们的脚本文件的话就需要我们更改其策略才行,如下命令可以帮助你 ...

  5. jstl用法 简介

    <c:choose> <c:when test="${salary <= 0}"> 太惨了. </c:when> <c:when t ...

  6. IntelliJ IDEA 远程调试 Tomcat 的方法

    在调试代码的过程中,为了更好的定位及解决问题,有时候需要我们使用远程调试的方法.在本文中,就让我们一起来看看,如何利用 IntelliJ IDEA 进行远程 Tomcat 的调试. 首先,配置remo ...

  7. lnmp 中的laravel出现白屏的处理办法

    find / |grep fastcgi_params 其实是找fastcgi_params这个文件编辑 如果在知道目录的情况下也可以直接 vi /usr/local/nginx/conf/fastc ...

  8. MyEclipse使用教程：unattended安装

    [MyEclipse CI 2019.4.0安装包下载] 以下内容适用于2013及以上版本. 运行无提示安装程序 1. 创建一个unattended response文件. 2. 要激活unatten ...

  9. Python之面向对象之反射、内置方法

    一.静态方法(staticmethod)和类方法(classmethod) 类方法:有个默认参数cls,并且可以直接用类名去调用,可以与类属性交互(也就是可以使用类属性) 静态方法:让类里的方法直接被 ...

  10. spring 定时器时间配置

    Spring--quartz中cronExpression The '*' character is used to specify all values. For example, "*& ...