写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. Py修行路 python基础 （九）作用域 函数嵌套 闭包

    名称空间与作用域 变量,函数 分成三种 #内置名称空间  内置函数, 系统函数内部自定义的. python查看内置函数,命令: import builtins dir(builtins) #全局名称空 ...

  2. hbase集群配置

    说明 安装 配置 启动 网页效果 一点废话 本文介绍hbase集群配置 说明 hbase想正确配置成功的前提是,你必须知道hadoop集群和zookeeper集群是如何配置的 安装 下载地址 http ...

  3. Python3 持久化pickle模块

    pickle提供了一个简单的持久化功能.可以将对象以文件的形式存放在磁盘上. 1.pickle.dump(obj, file[, protocol]) 序列化对象,并将结果数据流写入到文件对象中.参数 ...

  4. 2014.8.27 CAD数据结构

    Rwy表中存放所有物理跑道,主键rwy_id,但没有跑道中心点坐标 rwy_direction表中存放所有所有逻辑跑道号,也没有跑道入口坐标.同一rwy_id对应有2条记录 rwy_cline_poi ...

  5. Oracle11gr2_ADG管理之跳归档恢复dg实战

    模拟故障 关闭备库 SQL> shutdown immediate; Database closed. Database dismounted. ORACLE instance shut dow ...

  6. springMVC第一天

    这些是springMVC3.2所用到的jar包 web.xml配置 <?xml version="1.0" encoding="UTF-8"?> & ...

  7. SpringSecurity3.X权限原理(转)

      这里给出一个简单的安全验证的实现例子,先说一下需求: 1.通过登录页面进行登录 2.用户登录前访问被保护的地址时自动跳转到登录页面 3.用户信息存储在数据表中 4.用户权限信息存在在数据表中 5. ...

  8. zookeeper介绍及集群的搭建(利用虚拟机)

    ZooKeeper ​ ZooKeeper是一个分布式的,开放源码(apache)的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase.dubbox.kaf ...

  9. java Web中页面跳转方式之请求转发

    1.在一个请求中跨越多个Servlet 2.多个Servlet在一个请求中,他们共享request对象.就是在Servlet01中setAttribute()保存数据在Servlet02中由getAt ...

  10. 【HDU4970】Killing Monsters

    题意 数轴上有n个点,有m座炮塔,每个炮塔有一个攻击范围和伤害,有k个怪物,给出他们的初始位置和血量,问最后有多少怪物能活着到达n点.n<=100000 分析 对于某个怪物,什么情况下它可以活着 ...