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

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

本文探讨了在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 601
@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 1585
一
简述inline-block的边距问题及解决方法
小星的博客
09-13 6708
当我们讲一个元素的display设置为inline-block时，设置好各元素的宽高及颜色后，这个边距就会诡异的出现了，即使你使用（margin:0;padding:0;）也是无法消除的。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style typ
CSS使用display:inline-block与float布局的区别
qq_40186421的博客
04-02 453
1.解释一下display的几个常用的属性值，inline ， block， inline-block inline: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行. block: 使元素变成块...
inline-block元素会有上下边距的解决方法
jie_rookie的博客
06-28 4276
设置父元素的line-height为0;
CSS display:inline-block的边距问题及解决方法
weixin_43744709的博客
05-22 1501
将一个元素的display设置为inline-block时，设置好各元素的宽高及颜色后，这个边距就会诡异的出现了，即使使用（*{margin:0;padding:0;}）也是无法消除 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">
【高频考点精讲】display 属性详解：block、inline、inline-block、none 的区别
全栈老李的博客
07-05 894
display属性就像CSS世界的排版导演，不同的值相当于给元素不同的"人设"：block是霸道总裁——我要独占一行！inline是佛系青年——你们随意我都可以~是斜杠青年——我全都要！none是隐身侠——你看不见我！掌握它们的特性，就能像搭积木一样灵活控制页面布局。我是全栈老李，下期我们聊聊position的玄学，记得关注哦！（本文示例代码已上传GitHub，搜索"全栈老李display详解"获取完整项目）
我在 htdocs/css/app.css 中看到 .Switch_switchContainer { cursor: pointer; display: inline-block !important; height: 22px; overflow: hidden; position: relative; vertical-align: middle; width: 44px }
11-07
重要：为了确保样式正确应用，需要检查CSS文件的加载顺序，确保包含禁用状态样式的CSS在组件库自带的样式之后加载（如果是第三方组件）。 最后，根据问题要求，在回答后提出3-5个相关问题。 根据您提供的 `htdocs...
<a data-w-e-type="linkButton" data-w-e-is-void data-w-e-is-inline data-color="${color || '#3e6df1'}" data-title="${title}" data-link="${link}" style=" display: inline-block; margin-left: 3px; margin-right: 3px; font-size:14px; color: ${color || '#3e6df1'} ; border:2px solid ${color || '#3e6df1'}; border-radius: 4px; padding: 4px 16px; text-align: center; background-color: #fff; text-decoration: none; font-family: Arial, sans-serif; mso-line-height-alt: auto; " href="${link}" target="_blank" title="${link}" > ${title} </a>超链接在outlook中无法跳转，如何解决
最新发布
11-15
Outlook（尤其是桌面客户端）不支持某些现代CSS属性，如 `display: inline-block`、`border-radius` 等，这些属性可能破坏链接的可点击区域，使其无法正常触发跳转。以下我将逐步分析您提供的样式，并提供针对性解决...
div设置display:inline-block属性产生空白间距
泡泡的博客
07-07 1146
使用 inline-block 的时候，ie8、chrome、firefox、opera 以及 safari 浏览器下，两张图片之间有“空白间隙。      平时写代码，为了使代码看上去“层级分明”，通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是空白符。      去除空白符的存在只需
去除display:inline-block默认间距
weixin_42450794的博客
07-26 1397
今天在写横向轮播的时候，碰到了一个问题，我需要让li横向排列，但是遇到父元素边框的时候，li会自动换行，如下图： 图1： 这是由于float:left造成的，引用官方描述：“浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止” 我们要解决这个问题，就要从根源float:left下手，换成display:inline-block 从我的实际代码的结构分析（结构：...
html中的inline-block(image等)元素为什么不能使用margin:auto
qinli15751009359的博客
05-13 1493
inline-block行内块元素为什么不能使用margin:auto,那么先来了解一下块级元素为什么能使用。 块级元素的水平属性，块级元素在水平方向上有7大属性，margin-left、border-left、padding-left、width、padding-right、border-right和margin-right，这7大属性的值加起来必须是元素包含块的宽度， 这7个属性中，只有3个属性可以设置为auto：margin-left、width、margin-right，其余属性必须设定为特定的值，
图片出现空白问题
Dear
05-31 753
当并排多张照片，期待效果是这样的： 却出现了下面的效果 那么如何解决？这为何会发生呢？ 其实这是因为我们写代码时换行造成的。 解决方案如下： <!-- 第一种方法，既然是换行造成的，不让他换行不就行了 --> <img src="1.jpg" alt=""><img src="1.jpg" alt=""><img src="1.jpg" alt...
解决块级元素(inline-block)自带的边距
weixin_44805161的博客
04-07 578
方法一 子元素使用float，可能会影响布局 代码(下面的css都是这段html代码) <div class="exercise"> <div></div> <div></div> <div></div> </div> css .exercise > div{ ...
解决inline和inline-block元素的默认间距问题
卜小娴的博客
07-31 2648
经常我们会碰到多个inline元素和inline-block元素同行展示时会出现间距问题，而我们已经处理了margin:0;和padding:0;如下： 这种默认间距也被称为元素留白间距，是我们在编辑器coding时对于inline或inline-block元素进行换行编写，元素进行留白引起，解决办法有以下四种： 方法一：把标签内容写在同一行 此方法直接针对引起原因进行处理，所以当我们把代码写在
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值