写HTML时把需要紧挨着的内联元素写在一行，设置其父容器的font-size为0，再设置内联元素的字体大小，例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{margin:0;padding:0;}

        body{ color: #333 }

        .demo{ overflow: hidden; font-size: 0 }

        span{ display: inline-block; width: 100px; height: 100px; background-color: #ddd; border:1px solid #000; }

        .demo span{ font-size: 16px; }

    </style>

</head>

<body>

    <div class="demo">

        <span>设置内联元素写在一行</span>

        <span>设置内联元素写在一行</span>

        <span>设置内联元素写在一行</span>

        <span>设置内联元素写在一行</span>

        <span>设置内联元素写在一行</span>

        <span>设置内联元素写在一行</span>

    </div>

</body>

</html>

如图显示:

如何处理html中的内联元素之间水平空隙的更多相关文章

  1. CSS 中的内联元素、块级元素以及display的各个属性的特点

    CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...

  2. CSS 中的内联元素、块级元素、display的各个属性的特点

    CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-le ...

  3. html中内联元素和块元素的区别、用法以及联系

    昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下: <ul id="BulletedList1" s ...

  4. css 块元素、内联元素、内联块元素

    块元素.内联元素.内联块元素: 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签 ...

  5. 【HTML笔记】--- 内联元素间距问题及解决方案

    一.内联元素间距问题 在HTML实践中我们会发现,有时候内联元素之间会存在一定的间距,并且这间距和margin和padding无关.这是由编辑时的空白字符引起的,并且间距的大小受父元素的font-si ...

  6. 内联元素inline-block空隙问题

    1.产生的原因 当我们使用"display:inline-block"把块集元素转换为内联元素时,每两个内联元素之间有一定的空隙,既不是margin也不是padding,最终发现是 ...

  7. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

  8. 内联元素的盒子模型与文档流定位padding属性

            内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px}   与     span{width:100 ...

  9. 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素

    盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...

随机推荐

  1. 关系数据库域关系演算语言QBE

    QBE: Query By Example 基于屏幕表格的查询语言 查询要求:以填写表格的方式构造查询 用示例元素(域变量)来表示查询结果可能的情况 查询结果:以表格形式显示 QBE操作框架 ...

  2. 主流ETL工具

    主流ETL产品: Ascential公司的Datastage(Datastage在2005年被IBM收购).Informatica公司的Powercenter. NCR Teradata公司的ETL ...

  3. DIKW模型与数据工程

    DIKW 体系 DIKW体系是关于数据.信息.知识及智慧的体系,可以追溯至托马斯·斯特尔那斯·艾略特所写的诗--<岩石>.在首段,他写道:“我们在哪里丢失了知识中的智慧?又在哪里丢失了信息 ...

  4. Oracle11gR2_ADG管理之resinstate实战

    主库上打开闪回 SQL> select flashback_on from v$database; FLASHBACK_ON ------------------ YES 模拟断电 SQL> ...

  5. ffmpeg截取一段视频中一段视频

    ffmpeg  -i ./plutopr.mp4 -vcodec copy -acodec copy -ss 00:00:10 -to 00:00:15 ./cutout1.mp4 -y -ss ti ...

  6. 微信小程序中的倒计时

    这是我项目中的例子,如果有更好的建议欢迎留言 ,一起学习 //获取时间 var sekillStartTime = resultLis[0].planGroup0.sekillStartTime;// ...

  7. angularJS学习（三）——搭建学习环境

    1.安装Node.js 和Testacular 1.1. 安装Node.js及配置部分,在另一篇博文:node.js的安装里面讲到了,地址是:http://www.cnblogs.com/tianxu ...

  8. linux下搭建android NDK开发环境

      1)下载android-ndk-r4 下载地址 http://www.ideasandroid.com/android/sdk/android-ndk-r4-linux-x86.zip http: ...

  9. python调用Go代码

    Go 1.5发布了,其中包含了一个特性:可以编译生成动态链接库,经试验,生成的.so文件可以被python加载并调用.下面举个例子: 先写一个go文件main.go: package main imp ...

  10. linux SIGSEGV 信号捕捉，保证发生段错误后程序不崩溃

    在Linux中编程的时候 有时候 try catch 可能满足不了我们的需求.因为碰到类似数组越界 ,非法内存访问之类的 ,这样的错误无法捕获.下面我们介绍一种使用捕获信号实现的异常 用来保证诸如段错 ...