CSS Inline-block自带外边距出现原因及解决办法

最新推荐文章于 2025-07-16 23:00:09 发布
最新推荐文章于 2025-07-16 23:00:09 发布
阅读量2.6k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/z_m_s/article/details/80167688
本文探讨了在CSS中将非inline-block元素转换为inline-block元素时遇到的问题及解决方案。介绍了一种通过设置font-size:0和-webkit-text-size-adjust:none来优化布局的方法。

出现原因：使用css更改非inline-block水平元素为inline-block元素


没有空格就没有了

每个之间使用margin-left负值就太笨了而且要查表，把</div>放到第二行首也是可以的，但是影响美观，不适用，目前较好的方法：font-size: 0;-webkit-text-size-adjust:none;




reset.css重置样式--小技巧
JackieDYH的博客
02-13 491
@charset "utf-8"; body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select { margin: 0; padding: 0; } body { font-family: "微软雅黑", "宋体", Arial, Helvetica, sans-serif;...
HTML5+CSS笔记教程（CSS教程篇）
studhappy的博客
03-06 1563
一
简述inline-block的边距问题及解决方法
小星的博客
09-13 6634
当我们讲一个元素的display设置为inline-block时，设置好各元素的宽高及颜色后，这个边距就会诡异的出现了，即使你使用（margin:0;padding:0;）也是无法消除的。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style typ
【一文解决】块级元素，行内元素，行内块元素
最新发布
m0_74377334的博客
07-16 550
盒模型、margin & padding、块级元素、行内元素、行内块元素
CSS使用display:inline-block与float布局的区别
qq_40186421的博客
04-02 444
1.解释一下display的几个常用的属性值，inline ， block， inline-block inline: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行. block: 使元素变成块...
inline-block元素会有上下边距的解决方法
jie_rookie的博客
06-28 4263
设置父元素的line-height为0;
关于inline/inline-block级别元素的margin属性以及padding属性的一些理解
FuChenRenShen的博客
11-10 2647
总的来说，margin和padding属性作为新手入门时常用的属性，很多人都不陌生，相信理解起来都很简单，margin代表外边距，padding代表内边距，至少当时我们老师是这样讲的。 虽然使用起来很简单，但是真正将其实用的又能有多少人，以padding为例，作为一个内边距，就我而言，我会在使用  背景  以及  box-sizing  的时候使用的多，padding-box所占据的无非就是一点...
【CSS基础—No.03】消除display: inline-block产生的间隙
Chailo的博客
11-21 1359
如果你举例子尝试的话会发现一个问题，display: inline-block元素垂直和水平方向也会产生一个间隙，而这个间隙在实际开发中会让我们的页面不那么严谨。
【高频考点精讲】display 属性详解：block、inline、inline-block、none 的区别
全栈老李的博客
07-05 839
display属性就像CSS世界的排版导演，不同的值相当于给元素不同的"人设"：block是霸道总裁——我要独占一行！inline是佛系青年——你们随意我都可以~是斜杠青年——我全都要！none是隐身侠——你看不见我！掌握它们的特性，就能像搭积木一样灵活控制页面布局。我是全栈老李，下期我们聊聊position的玄学，记得关注哦！（本文示例代码已上传GitHub，搜索"全栈老李display详解"获取完整项目）
前端知识之css
prigilm的博客
11-03 460
CSS 文章目录CSS一、CSS介绍二、CSS语法1、注释2、CSS样式组成三、CSS三种引入方式四、CSS选择器1、基本选择器2、组合选择器3、属性选择器4、分组和嵌套5. 伪类选择器6. 伪元素选择器7. 选择器优先级8. 总结五. CSS继承1. 什么是继承?六. CSS常用属性1. 宽和高2. 字体属性3. 文字属性4. 背景属性5. display属性六. CSS盒子模型1. margin外边距2. border边框3. padding内填充4、总结七. 使网页中的元素产生阴影八. 清除某些HTM
CSS display:inline-block的边距问题及解决方法
weixin_43744709的博客
05-22 1475
将一个元素的display设置为inline-block时，设置好各元素的宽高及颜色后，这个边距就会诡异的出现了，即使使用（*{margin:0;padding:0;}）也是无法消除 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">
HTML中Inline-Block元素之间的空白
weixin_40341422的博客
05-24 507
display: inline-block 是个很好用的样式，当你需要多个块状元素在同一行时你的第一反应就是它。有了它，你不在需要让这些元素去“block”和“float”，然后再去处理由于“float”引起的布局问题。但有一个问题，当使用inline-block时，HTML元素之间的空白会显示在页面上，这让我们控制样式的时候很难处理方法1：各元素间不留任何空白一个100%能解决这个问题的方法是在...
display:inline-block;空白边距
weixin_30355437的博客
10-12 133
　　平常用display:inline-block;让列表水平的时候发现，水平每一行中间都有3px间距。如图所示： 　　　　　　　　　 　　　　　　　　 中间空白边距 网上查了一下发现，是由于平时写代码中间有空格造成的。 　　这里之记录三种方法， 　　1，font-size:0; 　　在ul{font-size:0;} li{font-size:14px;} 　...
解决块级元素(inline-block)自带的边距
weixin_44805161的博客
04-07 567
方法一 子元素使用float，可能会影响布局 代码(下面的css都是这段html代码) <div class="exercise"> <div></div> <div></div> <div></div> </div> css .exercise > div{ ...
HTML行内元素的margin、padding
少油少盐不要辣
12-10 1340
212
修改uni-data-picker中自带向下的箭头
01-20
### 修改 `uni-data-picker` 组件中的下拉箭头样式 在 UniApp 中，如果希望自定义 `uni-data-picker` 的下拉箭头样式，可以通过覆盖组件内部的 CSS 来实现。具体方法如下： #### 方法一：通过全局样式文件修改 可以在项目的根目录下的 `static/css/cover.css` 文件中加入特定的选择器来覆盖默认样式。 ```css /* 覆盖 uni-data-picker 默认箭头 */ .uni-data-picker__arrow { border-top-color: red !important; /* 改变颜色 */ } /* 如果需要改变整个图标而非仅边框颜色 */ .uni-data-picker__arrow::after { content: "↓"; /* 自定义字符 */ font-size: 18px; } ``` 此方式适用于想要统一调整应用内所有 `uni-data-picker` 控件的情况[^1]。 #### 方法二：局部作用域内的样式重写 对于只影响单个页面或组件的情形，则可以直接在此页面或组件对应的 `.vue` 文件里的 `<style scoped>` 标签里添加相应规则。 ```html <template> <!-- 使用组件 --> </template> <style lang="scss" scoped> // 局部覆盖 /deep/.uni-data-picker__arrow { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgaWQ9ImxlZGUtMSIgZmlsbD0ibm9uZSIgeD0iNSIgeT0iOCI+CgkJPHBhdGggZD0iTSAxMiAxMyBMIDEyIDExIEwgOC41IDIuNSBDIDcuODcgMC44NyA2LjEzIDAuNDYgNC41IDAuNDYgQyAzLjg3IDAuNDYgMy4xMyAwLjg3IDMuNSAyLjUgWiBNIDYuNSAxOSBDIDkuMTMgMTkgMTAuMTMgMTguMTMgMTAuMTMgMTYuNSBDIDEwLjEzIDE0Ljg3IDkuMTMgMTMgNi41IDEzIFoiICAvPgoJPC9nPgo8L3N2Zz4='); /* SVG 图像作为背景图片 */ width: 1em; height: 1em; display: inline-block; } </style> ``` 上述代码展示了如何利用 Base64 编码后的 SVG 图片替换原有的三角形箭头，并设置了宽度和高度属性使其适应布局需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值