第十一天小技巧之空白消失术

多多Coi

已于 2022-07-29 09:55:30 修改

阅读量152

点赞数 1

分类专栏：自学前端 html标签 css 文章标签： css css3 html

于 2022-07-29 09:18:13 首次发布

本文链接：https://blog.csdn.net/m0_59201314/article/details/126048219

版权

自学前端同时被 3 个专栏收录

14 篇文章

订阅专栏

html标签

12 篇文章

订阅专栏

css

5 篇文章

订阅专栏

本文介绍三种方法帮助开发者处理代码中块元素间的空白问题：1) 图片高度100%填充，2) 父容器font-size设为0再恢复，3) 图片垂直对齐top。快速掌握消除空白技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们写代码的时候，常常会发现块元素之间会有一点空白，这是通过调边距和内补改变不了的。所以就需要我们用一些特殊的方法。

代码：
<body>
    <div class="item">
        <img src="./img" alt="">
        <p>这是一个文本了</p>
    </div>
</body>

第一种

给块元素设定一个高度，让图片的高度 height=100%
意思就是让图片撑满这一个块元素，所以会将空白挤掉。

.item{
            border: 1px solid red;
            display: inline-block;
            width: 500px;            
        }
        .item img{
            width: 100%;
            height: 100%;
            display: block;           
        }   
        .item p{
            text-align: center;           
            background-color: aqua;
            margin: 0;
        }

第二种

块元素的父容器 font-size=0,
然后再给当前元素加font-size

.item{
            border: 1px solid red;
            display: inline-block;
            width: 500px;
            font-size: 0;
        }
        .item img{
            width: 100%;            
        }   
        .item p{
            text-align: center;
            font-size: 16px;
            background-color: aqua;
            margin: 0;
        }

第三种

给图片一个竖直对齐方式 verticle-align=top

 .item{
            border: 1px solid red;
            display: inline-block;
            width: 500px;
        }
        .item img{
            width: 100%;
            vertical-align: top;
        }   
        .item p{
            text-align: center;
            background-color: aqua;
            margin: 0;
        }