inline-block的上下排列对齐问题

今天使用inline-block想在一个div里上下排列两个p元素，都是怎么排都不对。

如图：

具体的H5代码：

<div class="modify-rank-install">
    <ul>
        <li class="modify-rank-install-big"><div><p>KKKKKK</p>
            <p style="font-size: 1.2rem;line-height: 1.8rem">kkkkk</p></div></li>
        </ul>
</div>

CSS代码：

.modify-rank-install{
    padding: 0 1rem;
    background: #ffffff;
    border-radius: 14px;
    margin-top: 1rem;
}
.modify-rank-install li{
    border-bottom: 1px solid #E0E0E0;
    height: 5.5rem;
    line-height: 5.5rem;
}
.modify-rank-install li.modify-rank-install-big{
    height: 7.6rem;
}
.modify-rank-install li.modify-rank-install-big div{
    display: inline-block;
    height: 7.6rem;
    line-height: 7.6rem;
    border-color: black;
    border-width: 1px;
    border-style: solid;
}
.modify-rank-install li.modify-rank-install-big div p{
    height: 3.8rem;
    line-height: 5.5rem;
    border-color: red;
    border-width: 1px;
    border-style: solid;
}

 

 

 

后来看了大手的方法，其实很简单，在CSS里加一句

* {margin: 0;padding: 0;box-sizing:border-box;}

然后就可以了。