inline-block元素间间距问题

最新推荐文章于 2024-01-25 08:47:43 发布

julyying

最新推荐文章于 2024-01-25 08:47:43 发布

阅读量261

点赞数

今天室友培训html5,刚刚接触前端写了一个例子，几个块级元素设置为内联元素，发现元素之间始终存在间距，我一看也觉得奇怪，一想应该就是设置了inline-block的原因，网上一搜，果真发现了这个问题，没有时间做笔记了，在此记录一下，免得以后忘记。有时间再来整理一下块级行级元素的相关知识吧。

一篇解释得很清楚的文章原地址：http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

Display:

1.block:单行显示，可设宽高

2.Inline:同行显示，不可设宽高

3.Inline-block:整块换行，可设宽高

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

julyying

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
inline-block元素间间距问题

http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
复制链接

扫一扫

【前端怪谈】两个行内块元素之间的间距问题

hhhhhhhssss的博客

07-28

3691

文章目录前言一、问题描述二、解决方式1.使用浮动2.清除行内块元素之间的空格和换行符3.父元素设置font-size:03.父元素设置word-spacing总结前言相信行内块元素,也就是display:inline-block的元素大家并不少见,不知道大家有没有发现一个问题,就是当两个行内块元素在同一行并排时,它们之间会存在着间距。下面让我们一起来看看这个问题吧一、问题描述废话不多说,上图代码: <!DOCTYPE html> <html lang="en"> &l

inline-block带来的元素间距问题解决

09-24

本文主要关注`inline-block`元素的间距问题及其解决方案，同时也会对比`block`和`inline`的特性。首先，`display: inline-block` 是一种混合型布局模式，它结合了`inline`元素的并排显示特性与`block`元素的宽高...

参与评论您还未登录，请先登录后发表或查看评论

inline元素之间的距离问题

wosens的博客

03-28

394

凡是带有inline的元素都有文字特性，有文字特性就会被分割，相邻直接有4像素的距离。传入服务器时，会自动被压缩，因此不需要考虑。

内联（行内）元素间距解决方法

钟阿能

10-14

1176

内联（行内）元素 display: inline; 宽高大小由子元素决定，不能手动修改宽高，子元素一般放置文本元素，与其他内联元素并排在同一行内联元素不能改变宽高，导致有些属性无效，比如：width系列、height系列、margin-top、margin-bottom、padding-top、padding-bottom、line-height。常用的内联标签：<span>、<img>、<em>、<strong>、<i> 使用内联元素你可

行内块元素之间默认间距问题

热门推荐

心灵刈博

07-27

1万+

前言为了个文档结构条理性，我也来个前言，虽然不知道写个啥。但向大神学习态度不能丢。因为这个问题简单，逻辑性不强，就直接上问题上代码上解决方案了。大神勿喷，有什么问题，别的解决方案方法，希望大神们多多指点问题描述行内块元素之间，浏览器会有一个默认的间距，例如照片之间的间距，或者是别的元素类型直接转换过来的行内块元素，浏览器都会有默认的间距。话不多说，直接上图解释其中的bug。

两个DIV之间的间距,clear属性灵活应用(转载，学习一下)

chenwei9120的专栏

07-30

1万+

<br /> 大家在制作网页时，两个DIV之间是不是经常用到margin属性呢。<br /> margin在中文中我们翻译成外边距或者外补白（本文中引用外边距）。他是元素盒模型（box model）的基础属性。<br />　　我在制作的过程中，发现了一个问题，两个DIV之间用margin来控制间距的时候，如果你制作的网页是一个比较复杂内容较多的话，把网页放在IE和火狐两个浏览器测试，会发现，有些margin属性在火狐浏览器中会被忽略，也就是说DIV之间的间距消失了，margin属性没有起到作用

去除 inline-block 元素间间距的方法

每天都想吃好吃的

01-25

462

方法二：将每个 inline-block 元素的结束标签和下一个 inline-block 元素的开始标签写在同一行。方法一：设置父元素的 font-size 为 0，然后再在需要保留间距的子元素上重新设置 font-size。这样做可以避免在 HTML 代码中留下空格和换行符，从而去除 inline-block 元素间的间距。

去除inline-block元素间间距的N种方法

qq_43692768的博客

03-11

840

一、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子： <input /> <input type="submit" /> 间距就来了~~ 我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题： .space a { display: inline-block; padding: .5em 1em; background-color: #c

去除inline-block元素间间距的方法

Potry Code的博客

09-02

1万+

目录：一、现象描述二、解决方法方法1：各元素间不留任何空格方法2：使用margin负值方法3：在父元素上设置font-size:0方法4：使用letter-spacing或者word-spacing 一、现象描述 inline-block是一个块状行盒，表现为一个行内元素，它既拥有了块状元素可以设置width和height的特性，又保留了行内元素不换行的特点。而当我们去使用它时候会发现各元素之间...

inline-block元素默认间距的两种清除方法示例代码

09-24

`letter-spacing`属性通常用于设置字符间的间距，但在这里，我们可以巧妙地利用它来消除`inline-block`元素之间的间距。在CSS中，我们将`letter-spacing`设置为负值，例如`-0.5em`，可以将元素之间的空格“拉近”。...

inline-block元素的4px空白间距解决方案

01-19

前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果，不过留下了一上问题，就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。 ...

解决inline-block引起的空白间距问题

幸福只是一种感觉

08-18

3986

当我们在对元素的display属性使用inline-block值时，会在元素间形成一定宽度的空白间距。下面看一下源代码： inline-block li{ display:inline-block; width:100px; height:100px; border-radius:1em; padding:10px; } 1 2 3 页面效果如下图所示：

财务日常记账表.xlsx

08-13

工资表，财务报表，对账表，付款申请，财务报告，费用支出表，财务收支适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。

基于C#实现慕.课线上批改作业源码+文档说明+界面演示 (超级简单版期末大作业)

最新发布

08-13

<项目介绍> 基于C#实现慕.课线上批改作业源码+文档说明+界面演示 (超级简单版期末大作业) - 不懂运行，下载完可以私聊问，可远程教学该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------

HW营销人力资源体系.pptx

08-13

HW营销人力资源体系.pptx

机器学习资源大全中文版，包括机器学习领域的框架、库以及软件

08-13

机器学习资源大全中文版我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理。awesome-machine-learning 就是 josephmisiti 发起维护的机器学习资源列表，内容包括了机器学习领域的框架、库以及软件（按编程语言排序）。 Awesome 系列虽然挺全，但基本只对收录的资源做了极为简要的介绍，如果有更详细的中文介绍，对相应开发者的帮助会更大。这也是我们发起这个开源项目的初衷。

Linux命令行与shell脚本编程大全案例 (13).zip

08-13

linux常用命令大全

华为项目管理基础培训（124页）.pdf

08-13

华为项目管理基础培训（124页）

block和inline-block的区别

07-13

block和inline-block是CSS中两种常用的元素显示方式...block元素可以设置宽度、高度和垂直方向的间距，而inline-block元素也可以设置宽度、高度和水平方向的间距。根据具体的需求和布局要求，选择适合的元素显示方式。