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

时间：2016-06-04 14:57:22 阅读：222 评论：0 收藏：0 [点我收藏+]

标签：

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;
        }