css如何让块无间隙,CSS 去掉inline-block间隙的几种方法

2023-11-16

最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题,需要把间隙去掉。对于inline-block元素及去掉间隙的方法,在这里做一个简单的总结。

inline-block是什么

inline-block 即内联块,在CSS的元素分类中可以分成三种:行内元素或者内联元素、块级元素、以及内联块元素。

内联块元素具有了内联元素以及块级元素的特性:(1)元素之间可以水平排列 (2)可以当做一个块级元素来设置各种的属性,例如:width、height、padding等。

例子1:定义一个内联元素span为inline-block元素

我是一个span

我是一个span

我是一个span

我是一个span

#demo span{

display:inline-block;

background:#ddd;

}

效果图:

d33fe2b3545f43bb41fe516cf2718868.png

inline-block兼容性

(1)inline level的元素

对于内联元素(inline element),所有主流浏览器都支持直接设置display 的value值为inline-block来将其定义为内联块。

(2)block level的元素

IE7及以下浏览器对块级元素(block element)的支持并不完全,它们只支持用display:inline-block去定义一个inline level的元素为内联块。

由于IE7及以下浏览器支持直接将inline level元素设置为内联块,所以我们可以变通实现,先将block level元素设置为inline,然后再去触发该元素的hasLayout,使其拥有和inline-block相似的特性。可以这样写:

例子2:

我是一个div
我是一个div
我是一个div
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css如何让块无间隙,CSS 去掉inline-block间隙的几种方法 的相关文章

  • 新年新气象---多数据源配置

    概述 2022年第一天 在这祝大家新年快乐 好运连连 事业爱情双丰收 本文主要是通过注解结合aop的方式实现多数据源的动态切换 一 配置文件 spring datasource type com alibaba druid pool Dru
  • 增强现实-实验一

    实验一 1 手工制作一个空间增强现实盒子 如示例所示 放置在平板或手机屏幕上 搭配应用实现立体投影效果 2 制作立体投影所需的视频 程序 unity 全息投影 伪 视频 盒子蛮好做的主要是视频 之前没接触过unity 研究了一番 首先设置四
  • 关于js操作cookie

    一 什么是cookie 我们在浏览器中 经常涉及到数据的交换 比如你登录邮箱 登录一个页面 我们经常会在此时设置30天内记住我 或者自动登录选项 那么它们是怎么记录信息的呢 答案就是今天的主角cookie了 Cookie是由HTTP服务器设
  • 修饰符-访问修饰符internal sealed

    摘自 internal C 参考 摘自 sealed C 参考 Internal 访问仅限于当前程序集 protected internal 访问限制到当前程序集或从包含派生的类型的类别 程序集就是代码编译后bin目录下生产的 exe或者
  • 16-DFS(深度优先搜索算法)

    DFS 深度优先算法 是常见的搜索算法 早期常用于需要搜索的地方 并且还拓展出很多其它算法 深度优先算法 DFS DFS 深度优先算法 是早期开发爬虫时常用的算法 它的搜索思路是从树根开始一直找直到找到树型数据结构的叶节点 以搜索一个节点数
  • 小程序iOS兼容问题总结

    1 IOS 上 JS 只支持 new Date YYYY MM DD 这一种格式 YYYY MM DD 等格式都不支持
  • Raft 一致性算法

    文章目录 1 CAP 定理 1 Raft 基本概念 2 Raft 算法核心 2 1 Leader 选举 2 2 日志复制 3 总结 1 CAP 定理 文章参考 lt 零声教育 gt 的C C linux服务期高级架构系统教程学习 服务器高级
  • POI框架导出EXCEL的简单列子(跨行跨列)合并单元格

    public static void main String args throws IOException try HSSFWorkbook wb new HSSFWorkbook HSSFSheet sheet wb createShe
  • 十八. Kubernetes Ingress

    目录 一 Ingress 基础解释 二 ingressController 安装 六 ingress 使用示例 pathType 详细 annotations 基于k8s注解为 nginx 添加功能示例 路径重写 Session Affin
  • (二)selenium IDE 插件下载与安装

    前面selenium已经下载安装成功 接下来尝试录制下脚本 此时有个IDE插件是必备的 1 下载Chrome插件 进入网址 https www extfans com 搜索 selenium IDE 然后下载 2 安装插件 打开Chrome
  • plsql 返回结果集的存储过程

    返回结果集的存储过程 1 创建一个包 在该包中定义了一个游标类型test corsor create or replace package testpackage as type test cursor is ref cursor end
  • Linux内核自带SPI设备驱动测试程序分析:spidev_test.c

    在Linux系统中 SPI 的用户模式设备接口的驱动源码位于 drivers spi spidev c 在应用层生成 dev spidev 的节点 可以通过 read write 达到与硬件设备的 SPI 通信 下面介绍spidev驱动移植
  • js获取当前月、上一月和下一月

    获得当前月 function getNowMonth var date new Date var year date getFullYear var month date getMonth 1 month month gt 9 month
  • K8S 基础概念学习

    1 K8S 通过Deployment 实现滚动发布 比如左边的ReplicatSet 的 pod 中 是V1版本的镜像 Deployment通过 再启动一个 ReplicatSet 中启动 pod中 镜像就是V2 2 每个pod 中都有一个
  • 渗透测试工程师面试题大全(二)

    渗透测试工程师面试题大全 二 from backlion大佬 整理 51 sql 注入写文件都有哪些函数 1 select 一句话 into outfile 路径 2 select 一句话 into dumpfile 路径 3 select
  • 如何安装 IntelliJ IDEA 最新版本——详细教程

    IntelliJ IDEA 简称 IDEA 被业界公认为最好的 Java 集成开发工具 尤其在智能代码助手 代码自动提示 代码重构 代码版本管理 Git SVN Maven 单元测试 代码分析等方面有着亮眼的发挥 IDEA 产于捷克 开发人
  • Allure在自动化测试中的应用!

    01 Allure的简介及使用 1 应用场景 自动化的结果一定是通过一个报告来进行体现 Allure 是一个独立的报告插件 生成美观易读的报告 目前支持Python Java PHP C 等语言 为dev QA 提供详尽的测试报告 测试步骤
  • 微信小程序实现视频号跳转

    三种类型 1 跳转到视频号主页 wx openChannelsUserProfile finderUserName 视频号id 2 跳转到视频号视频 wx openChannelsActivity feedId 视频id finderUse
  • 文件上传-图片webshell上传

    图片webshell制作 在服务器端的PHP代码中 对于用户上传的文件做文件类型检查 查看文件格式是否符合上传规范 可以检查文件二进制格式的前几个字节 从而判断文件类型是否正确 针对这种情况可以直接新建要给1 jpg 其中代码内容如下 GI

随机推荐

  • 【数据结构】 二叉树面试题讲解->壹

    文章目录 引言 相同的树 https leetcode cn problems same tree description 题目描述 示例 示例一 示例二 示例三 题目解析 代码实现 另一棵树的子树 https leetcode cn pr
  • 华为OD机试-找出重复代码-2022Q4 A卷-Py/Java/JS

    小明负责维护项目下的代码 需要查找出重复代码 用以支撑后续的代码优化 请你帮助小明找出重复的代码 重复代码查找方法 以字符串形式给出两行代码 字符审长度1 lt length lt 100 由英文字母 数字和空格组成 找出两行代码中的最长公
  • 深度学习之感知器的python实现,及用感知器实现鸢尾花的分类

    机器学习一般用来处理结构化的数据 深度学习一般用来处理非结构化的数据 例如图像 视频 文字等 权重更新过程 如果真实是1 预测是0 则权重会增加 相当于为了达到阈值增加权重 如果真实是0 预测是1 则权重会降低 相当于为了达到阈值减少权重
  • 玩客云通过openwrt作为旁路由

    前置条件 玩客云安装 docker 安装 OpenWrt 这边又两套方案可供选择 下面是具体教程的链接镜像一 https www right com cn forum thread 8024126 1 1 html镜像二 https hub
  • 在Idea中调试ant应用

    Ant调试 Ant调试 ant 是一种非常方便的打包 部署的工具 通过ant 可以一键构建整个项目 虽然MVN也支持这种功能 但是MVN混杂了package管理的功能 并且不是很自由 学习成本比较高 通常 我们调试ant构成的程序 是通过远
  • 零散算法

    1 字符串匹配 朴素的串匹配算法 KMP匹配算法 2 广度优先搜索BFS 3 深度优先搜索DFS 4 狄克斯特拉算法Dijkstra 5 贪婪算法 6 动态规划 7 安全散列算法SHA 用递归分析问题 基于循环写代码 10 关于查找算法 1
  • unity+射线检测

    private Camera aRCamera Ray ray RaycastHit hit aRCamera GameObject Find RenderCamera GetComponent
  • JavaScript节流与防抖

    一 节流 概念 在规定的间隔时间范围内不会重复触发回调 只有大于这个时间间隔才会触发回调 把频繁触发变为少量触发 类似于技能CD 应用 点击按钮 轮播图点击左右箭头 插件lodash js 它里面封装了函数的防抖与节流业务 p 计数器 sp
  • 抓包工具篇|Charles

    1 简介 Charles 是在 Mac 下常用的网络封包截取工具 在做 移动开发时 我们为了调试与服务器端的网络通讯协议 常常需要截取网络封包来分析 Charles 是收费软件 可以免费试用 30 天 试用期过后 未付费的用户仍然可以继续使
  • 怎样使用BAT脚本实现自动按键盘的某个键

    批处理是不行的 用VBS 很简单 例子如下 Set objShell CreateObject Wscript Shell do WScript Sleep 3000 objShell SendKeys F5 WScript Sleep 3
  • Weblogic 12c 集群部署和session复制

    在上一篇Weblogic12c集群搭建的基础上 这一篇介绍Weblogic12c集群应用的部署和session复制 1 启动服务 首先在weblogic12c控制台 启动受托管服务server1 server2 server3 2 将要部署
  • 前端实现微信支付(H5,微信小程序)

    一 微信支付 H5 微信小程序 通常一些电商项目使用到微信支付操作 所以简单地介绍一下微信支付的具体流程 1 1 什么是微信支付 在什么业务场景会使用到微信支付 微信支付是微信内置微信浏览器 其他浏览器不支持 或者微信小程序的支付接口 主要
  • ubuntu如何修改首次登入不是anaconda的base环境

    ubuntu安装anaconda后 每次用户登录进去后所在环境都是anaconda的base虚拟环境 如果用户不想一开始登进去就是anaconda的base环境 想在需要使用anaconda时再激活anaconda环境 输入下面的命令就可以
  • 在Flutter里面构建布局

    https flutter io tutorials layout 可以学到 Flutter的布局机制 如何水平与垂直布局控件 如何构建一个Flutter布局 布局的效果图 https flutter io tutorials layout
  • 西山小菜鸟之Scrapy学习笔记---splash简介

    前言 本文主要介绍scrapy splash的理论知识 文中如有不正确的地方望大家指正 本文的主要内容出自书 精通Scrapy网络爬虫 虫术 Python绝技 背景 近几年随着前端技术和手机端App的飞速发展 互联网架构也发生了巨大的变化
  • 经典兔子问题python(头歌教学实践平台)

    第1关 经典兔子问题 递归 任务描述 问题 有一对兔子 从出生后的第三个月起 每个月都生一对兔子 小兔子再长三个月后每个月又生一对兔子 假如兔子都不死 请问每个月的兔子的数量是多少对 本关任务 编写程序求解上面的问题 相关知识 兔子问题的分
  • java——集合框架

    文章目录 接口 实现 类 算法 1 排序算法 2 查找算法 3 拷贝算法 4 填充算法 5 比较算法 6 随机算法 7 迭代器算法 8 交集 并集 差集 9 分割集合 10 数组和集合的互转 集合框架是一个用来代表和操纵集合的统一架构 所有
  • EFSM(事件驱动型有限状态机:Event Finite State Machine)

    一 介绍 EFSM event finite state machine 事件驱动型有限状态机 是一个基于事件驱动的有限状态机 主要应用于嵌入式设备的软件系统中 EFSM的设计原则是 简单 EFSM的使用者只需要关心 当事件到来时 通过EF
  • 手撸算法-最大子数组和-牛客

    描述 给定一个数组arr 返回子数组的最大累加和 例如 arr 1 2 3 5 2 6 1 所有子数组中 3 5 2 6 可以累加出最大的和12 所以返回 题目保证没有全为负数的数据 要求 时间复杂度为O n O n 空间复杂度为O 1 O
  • css如何让块无间隙,CSS 去掉inline-block间隙的几种方法

    最近做移动端页面时 经常会用到inline block元素来布局 但无可避免都会遇到一个问题 就是inline block元素之间的间隙 这些间隙会导致一些布局上的问题 需要把间隙去掉 对于inline block元素及去掉间隙的方法 在这