消除子盒子之间默认间距

最新推荐文章于 2024-07-04 11:19:29 发布

bsf000000___

最新推荐文章于 2024-07-04 11:19:29 发布

阅读量464

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/bsf000000___/article/details/131688625

版权

####消除子盒子之间默认间距

（1）父元素设置flex
（2）父元素设置font-size: 0;
（3）子盒子设置float属性

原代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width:50%;
            height:200px;
            margin:0 auto;
            border:1px solid red;
            
        }
        .son{
            width:40%;
            height:100px;
            border: 1px solid green;
            display:inline-block;
            
        }
    </style>
</head>
<body>
    <div class="father">
        father
        <div class="son">
            son
        </div>
        <div class="son">
            son
        </div>
    </div>
</body>
</html>

原效果图

在这里插入图片描述

（1）给父元素设置flex

在.father内加入 display:flex; 其余不变

效果图

在这里插入图片描述

（2）父元素设置font-size:0;

在 .father 内加入 font-size:0;

注意！！！在父盒子中加入font-size:0; 会影响到子盒子内的文字，应在子盒子内设置你想要的文字大小，若没有设置，就选择字体默认大小，在 .son 内加入font-size：16px;

效果图

在这里插入图片描述

（3）子盒子设置float属性

在 .son 内加入 float:left;

效果图
在这里插入图片描述

bsf000000___

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
消除子盒子之间默认间距

在父盒子中加入font-size:0;会影响到子盒子内的文字，应在子盒子内设置你想要的文字大小，若没有设置，就选择字体默认大小，在 .son 内加入font-size：16px;在.father内加入 display:flex;在 .father 内加入 font-size:0;在 .son 内加入 float:left;（2）父元素设置font-size:0;####消除子盒子之间默认间距。（3）子盒子设置float属性。（1）给父元素设置flex。
复制链接

扫一扫