这里为什么是padding-top,不是margin-top?

这里为什么是padding-top,不是margin-top?

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>多行布局--头中间尾部</title>

<style type="text/css">

*{

margin: 0px;

padding: 0px;

text-align: center;

}

.header{

width: 100%;

height: 200px;

background: red;

line-height: 200px;

margin: 0 auto;

position: fixed;

}

.content{

width: 800px;

height: 900px;

background-color:#FF9933; 

/*line-height: 900px;*/

margin: 0 auto;

margin-top: 200px;

}

.foot{

width: 800px;

height: 200px;

background:#00FF33;

line-height: 200px;

margin: 0 auto;

}

</style>

</head>

<body>

<div class="header">这是页面的头部</div>

<div class="content">这是页面的内容</div>

<div class="foot">这是页面的尾部</div>

</body>

</html>

http://img1.sycdn.imooc.com//climg/5c6637750001e3aa05800231.jpg老师,两个div之间不是属于外边距吗?第一个div覆盖了第二个,应该是外边距,文字和div 的才是内边距。为什么用外边距的话,显示出来的就是http://img1.sycdn.imooc.com//climg/5c6637dd00019f7614100562.jpg但是我的外边距设置也不是在第一个红色的div里设置,为什么是红色的div下移,不是我设置的那个div移动呢?有2个疑惑点

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

4回答
好帮手慕夭夭 2019-02-15 16:01:57

你好同学 , 解答如下:

1. margin :0;auto ;是设置上下边距为0   ,左右auto . 但是在它后面又设置了上边距 ,所以后面上边距的会把前面的上边距覆盖 , 即元素会有上边距100px .

http://img1.sycdn.imooc.com//climg/5c666f6a0001aeab03780220.jpg

2.父元素会跟着下来是属于一个特殊的现象哦  , 特殊记着即可 . 同学在认真看一下老师第一次的回复 .

3.第三个问题老师也在第一次回复中讲到了 . content的父元素是body , body跟着子元素跑下来了 , 而header设置了定位后 , 在没有给他设置top:0的时候 , 它受到body下移的影响 ,也会往下移动 . 

祝学习愉快 ,望采纳 .

好帮手慕夭夭 2019-02-15 14:34:45

你好同学 ,两个盒子之间的距离是属于外边距.  这里是存在一个margin重叠的特殊现象 , 当父元素没有设置border或者padding-top的时候 , 子元素设置margin-top ,那么父元素就会跟着一起跑下来  .所以在这个代码中 , 父元素body就是跟着子元素一起跑下来了.

http://img1.sycdn.imooc.com//climg/5c665c6f00015c0017300777.jpg

而头部在没有设置top:0的时候 ,受到body影响 ,默认在它没有脱离文档流的位置待着 . 所以如果使用margin-top就给头部设置top:

http://img1.sycdn.imooc.com//climg/5c665d6800019b9a03910257.jpg

祝学习愉快 ,望采纳 .

  • 提问者 王一宏 #1
    老师,margin :0;auto ;这是不是设置了top为0吗?这个意思不就是上下为0吗?还有那个,子元素设置外边距,为什么父元素会跟着下来?这个一个疑问。还有老师,既然是父元素下来,也不应该是第一个div下来吧,他不是父元素。
    2019-02-15 15:26:54
浮木吟歌_ 2019-02-15 13:22:15

同学,你好,我不是老师

关于第一个问题:可能是固定定位偏移默认问题,设置top:0;可实现页头贴上边显示

http://img1.sycdn.imooc.com//climg/5c664c3f00011bd103170172.jpg


浮木吟歌_ 2019-02-15 12:57:04

同学,你好,我不是老师

我只能回答你的第二个问题

你的内容部分,即黄色div上是有文字的,从网页效果上看,文字被覆盖了,说明黄色div确实相对于页面top下移了,只是红色div把绿色div挡住了:两个方法均可验证,(1)注释掉红色div(2)将绿色div的上边距只下移100px

  • 提问者 王一宏 #1
    您这回答错误吧,我看了都知道不对。
    2019-02-15 15:27:55
  • 浮木吟歌_ 回复 提问者 王一宏 #2
    哪里不对,我不知道
    2019-02-15 20:11:56
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师