样式错位，不知什么原因？

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .strap {
        font-size: 0;
    }

    .strap>* {
        display: inline-block;
    }

    .footer-content {
        height: 254px;
    }

    .footer-narrow_wrapper {
        width: 112px;
        height: 253px;
    }

    .footer-wide_wrapper {
        width: 357px;
        height: 253px;
    }

    .footer-qrcode_wrapper {
        width: 232px;
        height: 253px;
    }

    .footer-square {
        width: 110px;
        height: 110px;
        line-height: 110px;
        border: 1px solid black;
        font-size: 13px;
        color: rgb(128, 128, 128);
        text-align: center;
    }

    .footer-rectangle {
        width: 355px;
        height: 107px;
        border: 1px solid black;
        line-height: 110px;
        text-align: center;
        font-size: 18px;
        color: rgb(128, 128, 128);
    }

    .footer-qrcode {
        width: 230px;
        height: 230px;
        border: 1px solid black;
        font-size: 12px;
        color: rgb(51, 51, 51);
    }
    </style>
</head>

<body>
    <div class="footer-content content strap">
        <div class="footer-narrow_wrapper">
            <div class="footer-square">关于我们</div>
            <div class="footer-square">服务条款</div>
        </div>
        <div class="footer-narrow_wrapper">
            <div class="footer-square">隐私政策</div>
            <div class="footer-square">帮助中心</div>
        </div>
        <div class="footer-wide_wrapper">
            <div class="footer-rectangle">4000-987-805</div>
            <div class="footer-rectangle">help@renrenma.com</div>
        </div>
        <div class="footer-wide_wrapper">
            <div class="footer-rectangle">3041507598</div>
            <div class="footer-rectangle">@人人码官方微博</div>
        </div>
        <div class="footer-qrcode_wrapper">
            <div class="footer-qrcode"></div>
        </div>
    </div>
</body>

</html>

元素的顶部不能对齐，搞不清楚是什么原因，谁能讲解下
就

 .strap>*{
    display: inline-block;
    vertical-align:top;/*加上这个*/
}

应该是代码书写不规范导致

.strap>{
display: inline-block;
vertical-align:top;/加上这个*/
}

_这样写代码是有问题的，.footer-narrow_wrapper，.footer-wide_wrapper,.footer-qrcode_wrapper中加float:left;当然，这样的样式最好table布局吧