当前位置：网站首页>为什么文字不贴合边

为什么文字不贴合边

2022-08-09 12:52:00 【文默】

问题描述：

遇到的问题是，明明给两个文字内容间设置了一个值的边距（比如10px），但实际上却超出了我们设置的大小，当时非常搞不明白为什么那段文字不是贴着蓝色的框。后面才发现会有两种情况导致下面图片的情况。
在这里插入图片描述

原因分析：

  • 首先第一种情况是：我们要检查文字后面是否有空格，空格会导致一个占位，这种情况比较容易发现

  • 第二种情况是：span换行也会发生该种情况的发生。（内联元素、替换元素、inline-block元素均存在此问题）

下面我们来看看第二种情况的发生。
我们编写运行下面的代码可以发现，实际上他们之间并不是贴在一起的，会有缝隙隔开，而这个缝隙既不是空格，也不是magin之类造成的，这对与一些初次接触到的小伙伴来说就非常迷惑了，但当我们了解了他们的嘴脸，就不会被她坑到了。

<div >
    <span>a</span>
    <span>b</span>
    <span>c</span>
    <span>d</span>
</div>

在这里插入图片描述
解决方法

那么我们有什么解决的好方法呢？

  • 第一种： 最最最简单粗暴的是，我们直接把它们写成一行，那么就不会有换行的了，也就不会有空格了（这样太影响我们代码的美观了，我们程序员讲究的是优雅，写代码和写字一样）
<div >
    <span>a</span><span>b</span><span>c</span><span>d</span>
</div>
  • 第二种：在我们使用到的地方给span加上浮动
      span {
        float:left;
      }

总结

多动手，你就会发现又很多奇奇怪怪的bug，那么经过一番战斗，你就会变为大佬啦！要记住，只有你觉得做不到，觉得困难，觉得不行了，这个时候你才在进步，才是在突破自己。如果什么都会，那么就是在温水煮青—等死。加油，伙伴！路漫漫，吾将上下而求索鸭。

原网站

版权声明
本文为[文默]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_44181180/article/details/119244234

边栏推荐

猜你喜欢

随机推荐