1、span直接一行

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            span{

                background-color: red;

            }

        </style>

    </head>

    <body>

            <span>1</span><span>2</span>

    </body>

</html>

2、float浮动

<style type="text/css">

            span{

                background-color: red;

                float: left;

            }

        </style>

    </head>

    <body>

            <span>1</span>

            <span>2</span>

    </body>

3、父级元素添加font-size:0;子集元素font-size:自己根据效果添加数值

<style type="text/css">

            .div{

                font-size: 0px;

            }

            span{

                font-size: 12px;

            }

        </style>

    </head>

    <body>

        <div class="div">

            <span>1</span>

            <span>2</span>

        </div>

    </body>

4、由于内层border和外层border引起的空隙

border-right:根据效果自己调整数值

如何解决两个span标签之间的缝隙的更多相关文章

  1. 两个i标签之间有缝隙

    给i标签的父元素设置font-size:0:

  2. span标签之间的空隙

    出现的问题: 在html中,当有两个以及两个以上的span标签并列的时候,如果任意两个span之间换行书写的话,那么他们在页面上展现的时候往往会有空隙 解决的办法有两个: 1.将两个span标签写在同 ...

  3. 两个input标签之间间隙问题的解决

    <input type="text"> <input type="button" value="搜索"> 代码显示效 ...

  4. css怎样去掉多个Img标签之间的间隙

    在写css的时候经常会遇到这样的情况,两张宽度加起来是2n的图片,在宽度为2n的容器中放不下,这是因为两张图片之间有一段间隙的缘故,产生这种现象的原因是浏览器把两个img标签之间的空格当成了空白节点. ...

  5. css 图片有间隔多个Img标签之间的间隙

    今天写css时发现,图片加起来刚好是900px的三张图片,不能在一个900px宽容器放下,因为图片之间有间隔,我猜是浏览器把两个img标签之间的空格当成了空白节点. 在网上找到了几个不错的解决方法: ...

  6. span标签的巧用

    前言: 用struts的标签结合<td>标签将后台数据在表格里渲染了出来,目前需求是需要将两个状态组合在一起显示 解决:通过span标签在td里的套用可以实现 <logic:notE ...

  7. span i s等行内元素标签之间出现奇怪空格符号

    上述展开信息本来是这样写的,但是很奇怪windows下的测试环境支付时间前面莫名其妙多了个小方框 <p> <span><i>收货人:</i>{remar ...

  8. 如何解决两个li之间的缝隙

    如何解决两个li之间的缝隙的问题: 在做一个类似按钮左右滑动的选择器的动效,遇到了个是关于li之间的缝隙的问题: HTML如下: <span class="c1mChanger&quo ...

  9. fontsize可以解决img标签插入图片之间的缝隙

    当我们用img标签连续插入多张图片的时候,图片和图片之间会出现缝隙,通常我们的做法是用DIV将图片包起来进行浮动来解决这个问题,但是还有一种解决方法是在img的父级元素里面设置font-size:0来 ...

随机推荐

  1. 🔥《手把手教你》系列基础篇之4-python+ selenium自动化测试-xpath使用（详细教程）

    1. 简介 俗话说:磨刀不误砍柴工,因此在我们要开始写自动化脚本之前,我们先来学习和了解几个基本概念,在完全掌握了这几个概念之后,有助于我们快速上手,如何去编写自动化测试脚本. 元素,在这个教程系列, ...

  2. goroutiine同步/channel、互斥锁、读写锁、死锁/条件变量

    1. Goroutine同步[数据同步] 为什么需要goroutine同步 gorotine同步概念.以及同步的几种方式 1.1 为什么需要goroutine同步 package main impor ...

  3. 构建之法组——“别吃错喽”微信小程序评价

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9860 基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论 ...

  4. day 40 文本属性 常用css属性 定位

    一. 浮动的特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"字围"效果 4.收缩的效果 前提是标准文档流,margin的垂直方向会出现塌陷问题. 如果盒子居中: ...

  5. 【数据结构】之栈（Java语言描述）

    在前面的[这篇文章]中,我简单介绍了栈这种数据结构的操作功能,并使用C语言对其进行了代码的编写. Java的JDK中默认为我们提供了栈这种数据结构的API—— Stack . Java中的Stack类 ...

  6. 06-kubernetes service

    目录 Service ClusterIP 有头 Service 无头 Service Service 说明: Service 是作用于客户端可服务端(Pod)之间,作为一个固定的中间层 主要依赖于ku ...

  7. c语言I博客专业06

    问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8655 我在 ...

  8. Swoole 是 PHP 中的 Node.js?

    一想到那些可以使用 Node 的同事,一些 PHP 开发者的脸都嫉妒绿了.异步 Node 系统可以在不同协议间共享代码库,并在代码之外提供服务.这真的想让一个人转 Node 开发.实际上 PHP 中也 ...

  9. 这个七夕节，用Python为女友绘制一张爱心照片墙吧！【华为云技术分享】

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字“加群”,加入华为云线上技术讨论群:输入关键字“最新活动”,获取华为云最新特惠促销.华为云诸多技术大咖.特 ...

  10. 创建raid5（3个raid2个备份）

    创建raid5(3个raid2个备份) 1.首先创建五个磁盘 2.创建RAID5并设置2块备份故障盘: 3.可查看下阵列的详细信息(Spare Devices数量为1): 4.将磁盘阵列格式化为ext ...