菜鸟学习html+css时，出现的问题。有请大神

Question

加入margin-top后，显示不正常（如上图）
请问大神，为什么加入margin-top后会影响图片的位置。问题出在哪？
html代码：

 <div id="top">
            <div class="logo">
            <div class="area">
            <!--菜单设计-->
                <div class="menu">
                    <img src="images/menu.png">
                </div>
            <!--LOGO设计-->   
                <div class="logo_l">
                </div>
                <!--搜索设计-->
                <div class="search">
                </div>
                <!--个人中心设计-->
                <div class="user">
                </div>
                <!--购物袋设计-->
                <div class="bag">/div>
            </div>
            </div>
        </div>
        <!--图片区设计-->
        <div id="spread">           
            <img src="images/spread.png">       
        </div>
CSS代码：
/*公共样式*/
*{margin:0;padding:0;}
.area{width:1040px;margin:0 auto;}
/*顶部样式*/
#top{width:1080px; height:160px;overflow:hidden;background:orange;}
    #top .logo{height:160px;}
        .menu{float:left;width:346px;height:160px;margin-top:80px;}
        .logo_l{float:left;width:440px;height:160px;margin-top:50px;}
        .search{float:left;width:92px;height:160px;margin-top:80px;}
        .user{float:left;width:92px;height:160px;margin-top:80px;}
        .bag{float:left;height:160px;margin-top:80px;}

/*图片区样式*/
#spread{width:1080px; height:380px;}
#spread  img{height:100%; width:100%;}

Answer 1

盒子模型中，margin-top也是属于盒子的一部分，一样占据空间，只不过不显示内容而已，你加了margin -top 实际你的图片的那个盒子模型的高度就发生了变化