css学习总结（3）inline-block间隙

最新推荐文章于 2023-01-15 20:27:20 发布
最新推荐文章于 2023-01-15 20:27:20 发布
阅读量166 收藏
点赞数
分类专栏： CSS 文章标签： css html inline-block css布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15241071/article/details/79905296
版权

如果我们想让两个div排在一行，在使用inline-block的时候，大概会这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block</title>
    <style type="text/css">
        .container{}
        .left{
            display: inline-block;
            background-color: plum;
            width: 300px;
            height: 300px;
        }
        .right{
            display: inline-block;
            background-color: #33acfe;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">左</div>
    <div class="right">右</div>
</div>
</body>

</html>

效果如图：


我们注意到，两个div之间有间隙，这是因为左右两个div有字符间距，如果要去掉间隙，有2种方法：①：消灭字符；②：消灭间距。

①：消灭字符，容器的font-size设置为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block</title>
    <style type="text/css">
        .container{
            font-size: 0;
        }
        .left{
            display: inline-block;
            background-color: plum;
            width: 300px;
            height: 300px;
        }
        .right{
            display: inline-block;
            background-color: #33acfe;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">左</div>
    <div class="right">右</div>
</div>
</body>

</html>

效果如图：


这样就去掉了间隙，但是由于font-size为0，所以两个div的文字也不见了，那么这时候我们就需要给两个div的font-size设置样式覆盖容器的font-size：0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block</title>
    <style type="text/css">
        .container{
            font-size: 0;
        }
        .left{
            font-size: 20px;
            display: inline-block;
            background-color: plum;
            width: 300px;
            height: 300px;
        }


        .right{
            font-size: 20px;
            display: inline-block;
            background-color: #33acfe;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">左</div>
    <div class="right">右</div>
</div>
</body>

</html>

如图：


①：消灭间距，就是把左右两个div之间的代码间隔去掉（也可以把间隔注释掉）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block</title>
    <style type="text/css">
        .container{
        }
        .left{
            display: inline-block;
            background-color: plum;
            width: 300px;
            height: 300px;
        }


        .right{
            display: inline-block;
            background-color: #33acfe;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">左</div><div class="right">右</div>
</div>
</body>
</html>

Klingonsss
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中换行为啥有间隔,去除CSS的inline-block换行引起间隙的方法
weixin_42436482的博客
08-03 1778
去除CSS的inline-block换行引起间隙的方法发布时间：2020-08-29 13:42:41来源：亿速云阅读：177作者：小新这篇文章给大家分享的是有关去除CSS的inline-block换行引起间隙的方法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。对于内联元素和内联块元素的使用存在一个问题，即在显示源代码上存在的换行符时会形成空白，本篇文章将给大家介绍关于...
[CSS] inline-block间隙
Agumr的博客
11-13 243
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：inline-block 的 div 之间的空隙，原因及解决
ZFDEXX的博客
01-15 591
css基础
CSS3之解决相邻inline-block元素之间空白间隙问题
杨筱斌的博客
12-09 904
一、遇到的问题        前些天写瀑布流布局的时候，发现明明计算好了宽度使得一行能放下三张图片，实际效果却总是放不下，图片会挤到下一行去。上图： 可以看到，我本来是想要两行图片，每一行是三张。结果现在第一行的图片跑到第二行去了。 代码结构很简单： <li> <a></a> &...
inline-block元素的空白间距解决方法
clh604的专栏
12-14 4606
使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。有关于使用inline-block来代替float的讨论也蛮多的。 不过就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。 先看下代码 HTML部分： 1 2 3 4
css中间怎么空出距离,css中inline-block元素的空白间距
weixin_35076634的博客
08-03 486
inline-block在css中并不是什么新东西，但是有朋友可能会发现使用inline-block了，它与元素之间会存在4px的空白间距了，下面我来总结一些解决办法。解决办法第三种方法设置父元素的字体为“0”，然后在“inline-block”元素上重置字体需要的大小。 代码如下 复制代码ul {list-style: none outside none;padding: 10px;back...
css几种解决inline-block间隙的方案(整理)
12-02
序 display有几种属性： inline是内联对象，比如<a> 、 标签等，可以...inline-blcok块之间的不可见符号会被保留父层字体的1/3大小的空间 解决方案 知道了原因，方案就好找了，我把它分为以下几种 原始状态 <ul
详解CSS 去掉inline-block元素间隙的几种方法
12-13
对于inline-block元素及去掉间隙的方法，在这里做一个简单的总结。 inline-block是什么 inline-block 即内联块,在CSS的元素分类中可以分成三种：行内元素或者内联元素、块级元素、以及内联块元素。 内联块元素具有了...
css解决display:inline-block;产生的缝隙（间隙）的方法
09-27
本篇文章主要介绍了css解决display:inline-block;产生的缝隙（间隙）的方法，具有一定的参考价值，有需要的可以了解一下。
css调整元素间距,inline-block带来的元素间距问题解决
weixin_39907596的博客
08-03 748
display:inline-block：众前端们都知道，其作用是将对象呈递为内联对象，但是对象的内容作为块对象呈递。有如下代码CSS Code复制内容到剪贴板.ac-btna{background:url(../img/action.png)no-repeat;width:73px;height:25px;display:inline-block;}.ac-btn.btn-save{back...
inline-block元素的4px空白间距解决方案
09-25
有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果;那么今天我们就一起来说说这个“4px”的问题,需要了解的朋友可以参考下
css 字体间距_CSS实用技能：去除inline-block元素间间距的7种方法
weixin_39930711的博客
11-20 531
现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：两个相邻的radio之间总是多那么一点点的间距，不是margin也不是padding，但是设计妹纸不干了！！！我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：.space a { display: inline-block; paddi...
【CSS】inline和inline-block的间距
码婆Doph
11-25 1251
我们发现，inline和inline-block都会引起间距和空格，而这两个属性又是我们经常使用的，所以这篇博文显得尤为重要。哈哈… 直接将空格删除，也就是说在html里将两个标签写在一行且中间不要留有空格 在换行代码中间嵌入注释，如下： <div style="display:inline-block"></div><!-- --><div style='display:inline-block'
css去掉inline-block元素间隙的几种方法
weixin_38098192的博客
06-19 2750
间隙是由换行或者回车导致的，只要把标签写成一行或者标签直接没有空格就不会出现间隙。移除inline-block元素间隙方法（1）移除标签间的空格元素间的间隙出现的原因是元素标签之间的空格，把空格去掉间隙自然就会消失。来看以下几种写法：*写法一：&lt;div class="demo"&gt; &lt;span&gt;我是一个span&lt;/span&gt;&lt;span&gt;...
css解决display:inline-block;产生的缝隙（间隙）
codingWeb的博客
07-13 4756
display：inline-block的缝隙 <style type="text/css"> *{ border: 0; padding: 0; margin: 0; } ul li{ display: inline-block; border: 1px solid #000000; } </style...
如何解决inline-block元素的空白间距 css 完美解决
12-30 392
https://www.cnblogs.com/871735097-/p/4739114.html 如何解决inline-block元素的空白间距 css 完美解决 nline-block的元素之间会存在“4px”的空白间距 方法一：  margin-right: -4px;  或-0.25em 方法二： 设置父元素的字体为“0”，然后在“inline-block”元素上重置字体需要的大小...
inline-block间距问题
weixin_34403976的博客
05-14 980
inline-block间距问题 描述：dom设置 display:inline-block 出现水平或垂直间距 解决方案：设置父级 font-size:0 ，然后单独在子级设置所需字体大小 // html 层 <div class="box"> <div>content</div> </div> // css 层 .box { text-al...
[CSS]去除inline-block元素间距的几种方法
weixin_30660027的博客
11-17 108
当我们使用inline-block 时，会出现空白间距问题。 但这些间距对我们的布局，或兼容性产生影响，我们需要去除它，该怎么办？下面简单介绍几种方法： 1.去掉html元素之间的空格，直接写在一行。 2.使用margin负值，通常可设置为margin：-4px 3.使用font-size:0。父元素设置为font-size:0，再把inline-block元素重新设置font-...
inline-block间距
weixin_33725239的博客
12-30 378
大家好 我是程序员 1.背景介绍 我们在做移动端页面的时候，经常会用到inline-block元素来布局，但无可避免都会遇到一些问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。对于inline-block元素及其去掉间隙的方法，在这里做一个简单的总结。 2.知识剖析 inline-bloc...
CSS之使用display:inline-block来布局
最新发布
06-11
82分。 最佳旅行计划的评价为430分。 我们可以发现，该旅行计划既满足了小李同学的要求，又充分利用了旅行时间和资金，提供了一次有意使用 `display: inline-block` 可以让元素以块级元素的方式进行布局，但是又能够像义的毕业旅行。在问题二、三、四的求解过程中，也可以采用类似的方法行内元素一样排列在一行中。 以下是使用 `display: inline-block` 进行布局的示例得到最佳旅行计划，以满足不同的限制条件。 六、结论 针对小李同代码： ```html <div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div> ``` ```css .container学的毕业旅行计划，我们通过搜集相关数据，建立数学模型，采用动态规划 { font-size: 0; /* 解决inline-block间隙问题 */ } .box { display: inline-block; width:算法求解出最佳旅行计划。在实际求解过程中，我们需要考虑不同的限 100px; height: 100px; background-color: #ccc; margin: 10px; font-size:制条件，如旅行时间、旅行资金和人数等。最终，我们得到的旅行

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值