请老师帮我解惑，代码尾部的4个问题，谢谢老师！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;color:#fff;text-align:center;}
.header{
width:100%;
height:100px;
background:#333;
top:0;
position: fixed;
}
.logo{
float:left;
height:100px;
}
.nav{
position: absolute;
right:10px;
}
ul li{
font-size: 25px;
display:inline;
line-height:100px;
margin:0 25px;
}
a{
text-decoration:none;
}
.container{
margin-top:100px;
margin-bottom:100px;
}
img{
display: block;
margin:0;padding:0;
width: 100%;
}
.footer{
width:100%;
height:100px;
bottom:0;
background:#333;
position: fixed;
line-height:100px;
text-align:center;
font-size: 20px;
}
.footer ul li{font-size: 20px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class='header'>
<div class='logo'>
<a><img src='http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png'/></a>
</div>
<div class='nav'>
<ul>
<a href="#"><li>课程</li></a>
<a href="#"><li>职业路径</li></a>
<a href="#"><li>实战</li></a>
<a href="#"><li>猿问</li></a>
<a href="#"><li>手记</li></a>
</ul>
</div>
</div>
<div class='container'>
<a><img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"></a>
<a><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"></a>
<a><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"></a>
</div>
<div class='footer'>
<ul>
<a href="#"><li>网站首页</li></a>
<a href="#"><li>企业合作</li></a>
<a href="#"><li>人才招聘</li></a>
<a href="#"><li>联系我们</li></a>
<a href="#"><li>常见问题</li></a>
<a href="#"><li>友情链接</li></a>
</ul>
</div>
</body>
</html>
疑惑：
（1）代码是否正确？
（2）关于padding-top: 100px; padding-bottom: 100px;与 margin-top: 100px; margin-bottom: 100px;实现效果为什么没有区别？如果有区别怎么能看出来呢？
（3）主体的三张图我用的是<a>,带有链接效果是否不合适，要用<div>?
(4)<li><a></a></li>与<a><li></li></a>感觉一样的，是否一样呢老师？
正在回答 回答被采纳积分+1
同学你好，关于同学的疑问，解答如下：
1、测试同学提供的代码，效果是可以的。
2、padding和margin是有区别的哦。可参考下方的例子：
在div元素没有设置padding和margin的情况下（宽高为200px，背景颜色为红色）。
设置padding-top和padding-bottom之后（元素高度变为了400px）。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 200px;
height: 200px;
background-color: #f00;
padding-top: 100px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
去掉设置的padding值，给元素设置margin-top和margin-bottom值（并没有撑开高度，而是距离上方和下方有了100px的间距）。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 200px;
height: 200px;
background-color: #f00;
margin-top: 100px;
margin-bottom: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
综上所述，padding会撑开元素的宽高，margin不会撑开元素的宽高，而是让元素有了间距。
3、使用a链接是可以的哦。像京东官网，就是使用的a嵌套的img标签（点击图片，可以跳转）。
4、效果是一样的，但是为了代码更规范，建议使用li嵌套a标签的方式哦。
如果帮助到了你，欢迎采纳~祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星