解决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. 网页嵌入pdf、在线预览pdf工具及插件（转）

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  2. go语言中os/signal包的学习与使用

    package main; import ( "os" "os/signal" "fmt" ) //signal包中提供了两个函数 //No ...

  3. linux查看网络ip得两个命令ifconfig和 ip addr

    在安装linux 得时候,我们要选择桥接网络,相当于本电脑和虚拟机得电话都是接通外网,linux查看网络ip得两个命令ifconfig和 ip addr 1,命令ifconfig 如果ifconfig ...

  4. Linux五大网络IO模型图解

    对于一个应用程序即一个操作系统进程来说,它既有内核空间(与其他进程共享),也有用户空间(进程私有),它们都是处于虚拟地址空间中.用户进程是无法访问内核空间的,它只能访问用户空间,通过用户空间去内核空间 ...

  5. 剑指offer 剪绳子

    题目描述 给你一根长度为n的绳子,请把绳子剪成m段(m.n都是整数,n>1并且m>1),每段绳子的长度记为k[0],k[1],...,k[m].请问k[0]xk[1]x...xk[m]可能 ...

  6. Linux Firewalld 简明介绍

    防火墙作为保护服务器不受外部网络流量影响的一种方式.可以让用户定义一系列规则来控制外部网络中流入的流量,从而达到允许或阻塞的效果.firewalld 是防火墙服务的一个守护程序,实现了动态修改拥有 D ...

  7. 手把手 教你把H5页面打造成windows 客户端exe 软件

    序言: 好久没有更新博客了,最近在工作中碰到这种需求,由于没有做过,中间碰到好多坑,最后在一位贵人帮助的情况下,最终还是搞定了. 第一步,先安装 cefpython3 pip install cefp ...

  8. Css布局 响应式布局介绍

    1. 概念: 写一套css样式可以同时适配多个终端,是为解决移动互联网诞生的. 2. 作用: 面对不同的分辨率设备灵活性强,能够快捷解决多设备显示适应问题 3. 原理 媒体查询 ① 外联式媒体查询语法 ...

  9. div悬浮在屏幕的中间及点击按钮关闭弹出框

    #fd { position: fixed; z-index: 999; width: 109px; height: 323px; top: 71%; right: 1%; margin: -50px ...

  10. Delphi 循环语句和程序的循环结构