为什么不能得到一个正方形，求解

<style type="text/css">

#box{border:1px solid red;width:50px;}

#box1{padding:50%;}

</style>

<span id="box">

<span id="box1"></span>

</span>