由居中问题想到的inline-block的间距问题

Posted 2020-07-20

PS：文章是自己学习中遇到的疑惑，以及自己搜索的解决方案，其中多有不足，欢迎指正。

开始关注到inline-block之间的间距问题还是在设置居中的时候遇到的。话不多说先上居中代码：

 

html结构（尽管吐槽我的命名吧...）

<div class="big">
    <div class="small"></div>
</div>

css样式

        .big {
            width: 400px;
            height: 400px;
            background-color: pink;
            text-align: center;
        }
        .big:before {
            content: "";
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        .small {
            display: inline-block;
            width: 200px;
            height: 175px;
            background-color: darkred;
            vertical-align: middle;
        }

 

css代码中并没有太难的知识，这样的运行出来的效果是这样式的：

近乎完美的居中效果对不，而且并没有通过设置margin或者position来处理，这样就能解决在不同浏览器下面像素差距的问题。

但是细心的人已经发现其实small在左右并不是居中的，左边看起来像是被扇了一巴掌，肿肿的。。。

然后这一巴掌会造成一个我郁闷了很久的问题，我修改了一下css样式

.small {
            display: inline-block;
            width: 400px;          /* 我把子盒子的宽度改为了400px和父盒子的宽度一样一样的 */
            height: 175px;
            background-color: darkred;
            vertical-align: middle;
        }

这样到底会出现什么效果呢？上图

我擦类，明明子盒子和父盒子宽度一样，怎么还上天了呢？不对，怎么还下地了呢？  哦，这时候已经不能称之为盒子了，我觉得把子盒子看作一个图片会更加的合适。

于是创造的伪类before（注意已经 display: inline-block;）和small就产生了一个间距，这个间距导致small不能完整的显示在父盒子内，于是就出现了换行。

那么想要让small能够完整的显示在父盒子内的话就必须清除掉行内块元素之间的间距。

 

 大神的解决方案传送门：戳这里

 

 

 

 

看完个人觉得如果盒子内没有其它文字设置需求的话设置font-size还是一个十分简洁有效的方法，而且还可以清除掉图片下边的几像素的距离。

当然如果盒子内还有其它文字需求可以单独设置字体大小或者直接用margin的负值来解决也可以。