消除行内元素底部间隙

最新推荐文章于 2024-06-04 08:54:09 发布

优资园

最新推荐文章于 2024-06-04 08:54:09 发布

阅读量666

点赞数

分类专栏： css 文章标签： css line行内元素留白图片留白消除默认留白 line-height

本文链接：https://blog.csdn.net/zshsats/article/details/79946149

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

消除行内元素底部留白

行内盒模型

消除行内元素底部间隙：
原理：
middle对齐的是整个大盒子的行高中心位置往下偏移1/2字体的高度

<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
    }
.div1{
    display: inline-block;

    background: rebeccapurple;
}
.div2{
    display: inline-block;
    background: red;
    width: 150px;
    height: 150px;

}
</style>
<body>
<div class="div1" id="btn">
    <div class="div2"></div>
</div>
</body>

这里写图片描述
解决方法：

.div1{line-height: 0; }
.div1{font-size: 0;}
.div2{ vertical-align: bottom;}
.div2{ display:block}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

优资园

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
消除行内元素底部间隙

消除行内元素底部留白行内盒模型消除行内元素底部间隙：原理： middle对齐的是整个大盒子的行高中心位置往下偏移1/2字体的高度 &amp;lt;style&amp;gt; *{ margin: 0; padding: 0; } html,body{ height: 100%; }.div1{ di...
复制链接

扫一扫