求解释CSS样式

问题都在备注上，我还想知道到底是怎么设置的，可以让上下两个框框相接在一起的，谢谢各位了

  *{font-family:"微软雅黑";font-weight:bold;line-height:2.0em;}

    #tab{

        height:200px;

        width:450px;

    }

    #tab div{

        border-width:1px;

        border-style:solid;

        border-color:Navy;

        height:130px;

        margin:0px 50px 0px 35px;/*上为0和10为什么效果一样*/

        padding:5px 0px 40px 5px;

        border-top:2px solid brown;

    }

    .hide{

        display:none;

    }

    #tab ul{

        display:block;/*不知道有什么用，不加也可以*/

        height:21px;

    }

    #tab ul li{

        float:left;/*不知道有什么用，不加也可以*/

        cursor:pointer;

        display:inline-block;

        border-style:solid;

        border-color:gray;

        height:35px;

        width:80px;

        text-align:center;

        border-width:1px;

        border-bottom:none;

    }

    #tab ul li.on{

        border-top:2px solid brown;

         border-bottom:2px solid white;/*为什么设置成白色，两个框框相接处就没了*/

    }