【CSS】inline和inline-block的间距

最新推荐文章于 2025-09-07 13:33:34 发布
原创 最新推荐文章于 2025-09-07 13:33:34 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了如何解决使用inline及inline-block属性时产生的间距问题，提供了包括删除空格、利用注释、调整margin值、设置font-size为0以及使用letter-spacing等五种解决方案。

我们发现，inline和inline-block都会引起间距和空格，而这两个属性又是我们经常使用的，所以这篇博文显得尤为重要。哈哈…

  1. 直接将空格删除，也就是说在html里将两个标签写在一行且中间不要留有空格
  2. 在换行代码中间嵌入注释，如下：
<div style="display:inline-block"></div><!--
--><div style='display:inline-block'></div>
  1. 设置后一个margin-left为负值，但是注意每个浏览器的间距不尽相同。
  2. 给父元素添加font-size:0;
  3. 给父级元素添加 letter-spacing负值，通过子元素清除letter-spacing 值。
CSS属性display:inline-block用法深入理解
12-13
在CSS布局中，`display:inline-block`是一个非常重要的属性，它结合了`block`和`inline`两种显示方式的优点，使得元素既能保持内联元素的特性（如同行排列，允许空格），又能拥有块级元素的特性（如设置宽高，垂直居...
css几种解决inline-block间隙的方案(整理)
09-27
`inline-block`元素间的空格，包括换行符和缩进，都会被浏览器解析为无形的空白字符，从而在元素之间产生间距。这个间距的大小通常等于父元素字体大小的约1/3。 1. **改变书写结构** 一种直观的解决方法是通过...
inline-block元素的空白间距解决方法
clh604的专栏
12-14 4724
使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。有关于使用inline-block来代替float的讨论也蛮多的。 不过就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。 先看下代码 HTML部分： 1 2 3 4
inline-block间距
weixin_33725239的博客
12-30 434
大家好 我是程序员 1.背景介绍 我们在做移动端页面的时候，经常会用到inline-block元素来布局，但无可避免都会遇到一些问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。对于inline-block元素及其去掉间隙的方法，在这里做一个简单的总结。 2.知识剖析 inline-bloc...
CSS display属性详解：inline、block与inline-block对比
最新发布
weixin_35982453的博客
09-07 1299
inline适合用于文本或行内内容的样式控制。block是构建网页结构的主力，适合用于容器、标题、段落等大块元素。则是两者之间的桥梁，既能横向排列，又能控制尺寸，适合用于按钮组、导航栏、图标等需要灵活控制的布局场景。通过掌握这三种 display 类型的行为差异与适用场景，开发者可以更高效地进行网页布局设计，为后续更高级的布局技巧（如 flex、grid）打下坚实基础。显示类型典型用途是否可设置宽高是否独占一行排列方式inline文本样式、链接、图标。
[CSS] inline-block间隙
Agumr的博客
11-13 328
inline-block间隙 在给 li 设置inline-block 属性的时候，发现在li元素之间有一道间隙 <style type="text/css"> body,div,h1,ul,li{margin:0; padding:0;} ul,li{list-style:none;} .nav a{background: red;color:#fff;padding: 5px 10px;} .nav ul li{display:inline-block;} &
css学习总结（3）inline-block间隙
萧墨的博客
04-11 247
如果我们想让两个div排在一行，在使用inline-block的时候，大概会这样写：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;inline-block&lt;/title&gt;    &lt;styl
inline-block间距问题
Nancy2643的博客
10-29 301
inline-block间距问题
inline-block带来的元素间距问题解决
09-24
本文主要关注`inline-block`元素的间距问题及其解决方案，同时也会对比`block`和`inline`的特性。 首先，`display: inline-block` 是一种混合型布局模式，它结合了`inline`元素的并排显示特性与`block`元素的宽高...
Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
09-25
此外，随着CSS Flexbox和Grid布局的普及，`inline-block`在某些场景下的使用频率逐渐下降，这些新的布局方式提供了更强大且兼容性更好的解决方案，可以更好地控制元素的排列和间距，从而避免了类似`inline-block`的...
如何解决inline-block元素的空白间距 css 完美解决
12-30 457
https://www.cnblogs.com/871735097-/p/4739114.html 如何解决inline-block元素的空白间距 css 完美解决 nline-block的元素之间会存在“4px”的空白间距 方法一：  margin-right: -4px;  或-0.25em 方法二： 设置父元素的字体为“0”，然后在“inline-block”元素上重置字体需要的大小...
css 字体间距_CSS实用技能：去除inline-block元素间间距的7种方法
weixin_39930711的博客
11-20 702
现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：两个相邻的radio之间总是多那么一点点的间距，不是margin也不是padding，但是设计妹纸不干了！！！我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：.space a { display: inline-block; paddi...
CSS的inline、block与inline-block
weixin_34191845的博客
06-06 340
基本知识点 行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。 块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。 行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。 行内块元素(...
解决inline-block元素默认间距
林毅洋
06-05 591
inline-block有默认边框距 通过设置父级 letter-spacing: -0.5em;来解决 原文
清除inline-block行间距
TinaSlowDown的博客
11-23 502
做导航栏将子元素设为inline-block是最常用的方法。但不曾想，会出现以下情况： 这应该是一个很常见的问题，但现在才明白这个问题的由来和解决方法，容我先找个地洞藏一会。找到一篇非常全面的文章，inline-block元素间间隙产生及去除详解。在这里，我主要总结自己觉的比较好的解决方法，并结合自己的问题及理解做个记录。
[CSS]去除inline-block元素间距的几种方法
weixin_30660027的博客
11-17 163
当我们使用inline-block 时，会出现空白间距问题。 但这些间距对我们的布局，或兼容性产生影响，我们需要去除它，该怎么办？下面简单介绍几种方法： 1.去掉html元素之间的空格，直接写在一行。 2.使用margin负值，通常可设置为margin：-4px 3.使用font-size:0。父元素设置为font-size:0，再把inline-block元素重新设置font-...
css中间怎么空出距离,css中inline-block元素的空白间距
weixin_35076634的博客
08-03 575
inline-block在css中并不是什么新东西，但是有朋友可能会发现使用inline-block了，它与元素之间会存在4px的空白间距了，下面我来总结一些解决办法。解决办法第三种方法设置父元素的字体为“0”，然后在“inline-block”元素上重置字体需要的大小。 代码如下 复制代码ul {list-style: none outside none;padding: 10px;back...
CSS之inline和inline-block
weixin_30902251的博客
09-28 260
inline-block 控制台-代码： PS：inline-block是让元素以内联形式存在，也就是不是块级，但是表现起来(又具有块级元素的高度)--也就是可以调高度(margin或者padding,height) 二· 如果是inline的话，也就是内联，inline是只有水平的宽度可以调的，没有高度，任何的属性调高度都无效 三。如果不用上述两个的话,d...
css样式display: inline-block
03-18
### CSS `display: inline-block` 的使用方法及特性 #### 特性概述 `display: inline-block` 是一种 CSS 显示模式，它融合了行内元素 (`inline`) 和块级元素 (`block`) 的部分特性。具体来说，这种显示方式允许元素拥有块级元素的宽度和高度控制能力，同时也保留了行内元素在同一行排列的特点[^1]。 #### 主要特点 - **可设置宽高**: 虽然该元素表现为行内元素，但它支持定义宽度 (`width`) 和高度 (`height`) 属性，这通常只有块级元素才具备的能力[^2]。 - **不独占整行**: 不同于标准的块级元素（如 `<div>`），`inline-block` 元素不会强制占据一整行，而是能够和其他相邻的 `inline-block` 或者其他行内元素并列展示。 - **垂直对齐功能**: 支持通过 `vertical-align` 属性调整其相对于周围内容的垂直位置，比如顶部、中部或者底部对齐等[^3]。 #### 基本语法结构 以下是应用此样式的简单 HTML 和 CSS 示例： ```html <div style="border: 1px solid black;"> <span style="display: inline-block; width: 100px; height: 50px; background-color: lightblue;">Item</span> <span style="display: inline-block; width: 100px; height: 50px; background-color: salmon;">Another Item</span> </div> ``` 在这个例子中，两个 `<span>` 元素被赋予了 `inline-block` 样式，因此它们可以在同一行上呈现，并且各自具有指定的高度和宽度。 #### 解决常见问题 当运用 `display: inline-block` 时可能会遇到一些间距问题，这是因为浏览器默认会在这些元素之间处理空白字符作为间隙。可以通过移除 HTML 中的实际空格或利用负边距等方式消除不必要的间隔。 #### 实际应用场景举例 - 创建水平导航菜单：每个菜单项都可以设为 `inline-block` 来实现横向布局的同时还能单独设定尺寸大小。 - 图片画廊设计：让图片容器既能按需调整大小又能紧密排列在一起形成网格效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值