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

然後就可以了。