解决在使用display:inline-block时，在同一行的块级元素之间有空格的bug

最新推荐文章于 2022-06-09 12:11:34 发布
最新推荐文章于 2022-06-09 12:11:34 发布
阅读量208 收藏
点赞数
分类专栏： HTML入门 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46544453/article/details/120699495
版权

bug如图：

在这里插入图片描述

解决方法一：在书写代码的时候，把两个块级元素放在同一行

本来是这么写的
把代码改成这样子
完美解决

解决方法二：使用跨行的注释

把代码改成这样子
完美解决

解决方法三：设置margin-left为负值，可以但没必要

解决方法四：给父元素添加font-size:0（也麻烦，得重新设置子容器字体大小，也就是相当于把字体刷新了一下）

代码改成如图
完美解决

解决方案五：给父元素添加letter-spacing 为负值

把代码改成如图
完美解决

浸渍和酒精发酵同时进行
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
行内块的坑（空白间隙）
weixin_30305735的博客
06-27 137
一、去除元素间的空白 通过将上一个元素的闭合标签与下一个元素的开始标签写在同一行，可以去除元素间的空白，或者将两个inline-block元素间加上空白注释，或者不写元素的闭合标签等，例如这么写： 1 2 3 4 5 6 7 8 9 10 11 <ul> <li>one</li &g...
HTML标签换行导多个inline-block元素不能在同一行，img之间会有空格
xlzy
01-18 2321
一、当让两个各占50%的元素使用inline-block位于同一行时，HTML的标签换行会导致右边元素掉下去。 如下代码： style> *{ margin: 0; padding: 0; font-size: 20px; } .frame{ width: 100%; } .frame1{
关于的display:inline-block之后同一行的元素错位问题
l362929113的博客
09-05 2164
&amp;lt;ul&amp;gt; &amp;lt;li v-for=&quot;item in li&quot;&amp;gt; &amp;lt;img src=&quot;http://img1.qunarzz.com/sight/p0/1806/97/97f0cf5b6a44557ca3.water.jpg_200x200_003494e1.jpg&quot; /&amp;gt;
为什么display：inline-block的元素之间会有空格
qq_43654065的博客
04-13 1517
在页面布局中，我们需要将一些元素显示在同一行，其中一种方法就是设置display：inline-block，但是在这些同行显示的inline-block元素之间的会出现空隙。 原因： 元素被当成行内元素排版时，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，空白会被浏览器忽略），HTML代码中的回车换行被转成一个空白符，在字体不为0 的情况下，空白符占据一定的宽度，所以inline-block元素之间就出现了空隙。 解决方法： 删除HTML中
display:inline-block的BUG处理
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
11-09 200
display:inline-block的BUG display:inline-block；会默认把文字间的空格和换行进行处理，导致元素俩边有边距，通过删除代码之间的空格或者换行又不美观。 解决方案：给父元素设置font-size：0；然后在给子元素上单独设置元素大小即可解决。 ...
CSS属性display:inline-block用法深入理解
09-25
首先，`display:inline-block`的作用是将元素呈现为内联对象，这意味着它们会与其他内联元素排列在同一行中，不会强制换行。同时，`inline-block`元素的内容会按照块级元素的方式处理，允许设置宽高、内外边距等。...
display:inline-block的使用示例
09-25
在网页布局设计中，`display:inline-block` 是一个非常实用的CSS属性，它允许元素以行内元素的方式显示，但同时保留着块级元素的特性，如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局，尤其是需要在有限的...
display:inline-block的原理分析
09-25
这个属性结合了 `display:inline` 和 `display:block` 的特性，使得元素既能像内联元素一样在一行内排列，又能像块级元素一样拥有宽度、高度以及垂直方向的 margin 和 padding。这对于创建复杂的网页布局和响应式...
使用display:inline-block居中没有宽度的元素
01-21
在一个元素内居中另一个元素有时候会很困难.对于常规，静态定位的元素，可以让他向左或向右浮动，或者使用text-align属性让他在父元素内居左，居中或居右.还可以利用自动外边距(margin:0 auto;)来居中元素.这些方法...
css display：inline 将两个标签放一行
ajrn35768的博客
05-25 321
http://www.cnblogs.com/Bill_Lee/archi 1、CSS display使用 以下为DIV CSS运用dispaly CSS代码： .divcss{display:none} Html对应运用： <div class="divcss">我是测试内容</div> 2、display的值有...
处理两个div不在同一行（自用，两种方法）
cd243643664的博客
06-09 3428
处理两个div不在同一行
解决复制网页文本多一个空格的问题
qq_35939417的博客
11-26 2960
span标签和img标签在一起时，复制span标签中的文本会多出一个空格。 <span>文字</span> <img/> 或者这样： 文字 <img/> 上面两种写法都会导致复制出来的文本多个空格，换成如下写法可以解决问题： <div style="display: inline-block;">文字</div> <img/> ...
display常用属性及inline元素之间的空白和padding的问题
zyl_lyr1019的专栏
11-07 3763
本文主要对display 的几种最常用的方法进行了分析，分别为none，block，inline-block，inline，inherit。 其中主要分析了inline时，两个连续行内元素之间出现空白，以及行内元素占据空间等问题。 W3C规定： display 属性规定元素应该生成的框的类型。 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 d
display几点解释
u011392772的专栏
05-15 686
1.解释一下display的几个常用的属性值，inline ， block， inline-block inline: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行. bl...
CSS 设置两个div在同一行（display）
qq_22841387的博客
11-19 2025
display:inline
flex布局，inline-block元素不在一行上
满大人的博客
08-19 5754
1.三个子元素，第一个第二个固定px大小，需要设置第三个子元素宽度为100%时会改变第一个和第二个的宽度px值。 解决：第一个和第二个元素分别加上flex-shrink:0（不收缩 ，1 为收缩） 2.同为display:inline-block，高度也相同，有文字的和没文字的水平不对齐。 三个高度相同的div，display:inline-block 如果其中一个有文字,就会和其他的不在一条线...
多个div在一个div中一行水平显示(inline-block)
热门推荐
Fan Ruitian的博客
12-26 5万+
在之前的代码做简单的更改也能实现  多个div在一个div中一行水平显示(float ） html代码： left right bottom 用户display做法是对将要显示在一行的元素应用display:inline-block;既具有block的性质又具有in-line的性质 css html,body{
display: inline-block;可以让两个Html元素合到同一行，display: block;可以让两个在同一行的Html元素不在同一行
zwy15841139493的博客
09-11 1399
display: inline-block;可以让两个Html元素合到同一行，display: block;可以让两个在同一行的Html元素不在同一行
HTML5多个标记显示在同一行的解决方案之一: display设置为inline-block
qq_42408149的博客
09-10 3272
这样就可以把li行内元素变成行内块元素
display: inline-block有白边
最新发布
03-28
当使用display: inline-block时，元素会像内联元素一样排列在一行上，但是可以设置宽度、高度和边距等属性。 关于display: inline-block有白边的问题，通常是由于元素之间的空白字符（空格、换行符等）导致的。由于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值