KENTSING 2016-09-30 09:23 采纳率: 100%
浏览 904
已采纳

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

图片说明
加入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%;}
  • 写回答

2条回答 默认 最新

  • 当作看不见 2016-09-30 09:53
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题