关于margin和padding的问题

<!DOCTYPE html>

<html>

<head>

*{padding:0;margin:0;

color:#fff;

font-size:20px;}

.heard{width: 800px;

height: 30px;

background:#000;

text-align:center;

line-height:30px;

position: fixed;

left: 50%;

margin-left:-400px;

/* margin:0 auto;*/

}

.banner{width: 800px;

height: 500px;

background:green;

text-align:center;

/* line-height:500px;*/

padding-top:30px;

margin:0 auto;

}

.content{width: 800px;

height: 800px;

background:blue;

text-align:center;

/* line-height:800px;*/

margin:0 auto;

}

.footer{width: 800px;

height: 50px;

background:#000;

text-align:center;

line-height:50px;

margin:0 auto;

}

</style>

</head>

<body>

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

<div class="banner">这是页面轮播图</div>

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

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

</body>

</html>

视频中老师讲解了heard脱离了文档流，banner上移的情况，我的理解是如果用margin-top是不是也可以是banner部分整体下移呢？（但是我试了并没有），如果用padding-top，相当于内边距扩大了，那是不是说banner部分的整体也会变大呢？

宝慕林3013065 2020-04-09

源自：CSS网页布局基础 2-5 经典的行布局（2）

收起

2回答

好帮手慕久久回答被采纳获得+3积分 2020-04-09 20:16:33

同学你好，需要给元素先设置定位属性，然后left值才能生效，参考如下：

如果我的回答帮到了你，欢迎采纳，祝学习愉快！

收起回答

好帮手慕久久 2020-04-09 16:43:58

同学你好，banner上移的情况如下图：

使用margin-top将banner整体往下移的理解是正确的，也是可以实现的，参考如下：

使用padding-top是会将banner整体变大，但是banner的内容区域的大小没有受到影响，如下：

banner的内容区域大小没受到padding的影响，同时padding还将banner内容整体往下移了，这就满足我们的需求，方案也是可行的。

如果我的回答帮到了你，欢迎采纳，祝学习愉快！

收起回答

提问者宝慕林3013065 #1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程联系2</title> <style type="text/css"> *{padding:0;margin:0; color:#fff; font-size:20px;} .heard{width: 800px; height: 30px; background:#000; text-align:center; line-height:30px; position: fixed; left: 50%; margin-left:-400px; top:0; } .banner{width: 800px; height: 500px; background:green; text-align:center; left:50%; margin-left:-400px; margin-top:30px; } .content{width: 800px; height: 800px; background:blue; text-align:center; line-height:800px; margin:0 auto; } .footer{width: 800px; height: 50px; background:#000; text-align:center; line-height:50px; margin:0 auto; } </style> </head> <body> <div class="heard">这是页面头部</div> <div class="banner">这是页面轮播图</div> <div class="content">这是页面内容</div> <div class="footer">这是页面尾部</div> </body> </html> 老师您好，我按照我的理解把banner的那部分加了left：40% margin-left：-400px；怎么banner图的位置还不在中间呢？

2020-04-09 19:31:21