padding和margin我试过了效果一样的，它俩的区别是什么？头部的文字怎么设置上下间距相等？
来源：5-2 编程练习
慕田峪3102890
2018-12-28 21:23:47
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两行三列的运用</title>
<style type="text/css">
body {
margin: 0;
}
#header {
background-image: url(http://climg.mukewang.com/59093e9c00016ce303000100.png);
background-repeat: no-repeat;
background-position: 0,0;
text-align: right;
height: 80px;
background-color: black;
font-size: 20px;
}
#header a{
margin: 0px;
padding:30px;
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<div id="header">
<a href="">课程</a>
<a href="">职业路径</a>
<a href="">实战</a>
<a href="">猿问</a>
<a href="">手记</a>
</div>
<div>
<h1>课程推荐</h1>
<table>
<tr>
<td>职业路径</td>
<td>HTML5与CSS3实现动态网页</td>
</tr>
<tr>
<td>职业路径</td>
<td>零基础入门Android语法与界面</td>
</tr>
<tr>
<td>职业路径</td>
<td>iOS基础语法与常用控件</td>
</tr>
<tr>
<td>职业路径</td>
<td>PHP入门开发</td>
</tr>
<tr>
<td>职业路径</td>
<td>JAVA入门开发</td>
</tr>
</table>
</div>
<div>
<<h1>相关课程</h1>
<table>
<tr>
<td>HTML</td>
<td>CSS</td>
<td>JavaScript</td>
</tr>
<tr>
<td>HTML5</td>
<td>CSS3</td>
<td>Jquery</td>
</tr>
<tr>
<td>移动端基础</td>
<td>移动端APP开发</td>
</tr>
</table>
</div>
<div>
<h1>登录</h1>
<form>
<input type="text" name="用户名" placeholder="请输入邮箱/手机号">
<br/>
<input type="password" name="密码" placeholder="6-16位密码、区分大小写，不能用空格">
<br/>
<button>登录</button>
</form>
</div>
<div>
<a href="">网站首页</a>
<a href="">企业合作</a>
<a href="">人才招聘</a>
<a href="">联系我们</a>
<a href="">常见问题</a>
<a href="">友情链接</a>
</div>
</body>
</html>
1回答
-
您好，1.padding设置内边距（不允许使用负值）；margin设置外边距（允许使用负值）。
设置padding时的效果：
设置margin时的效果：
注意a标签的大小，在设置内边距时是在内部添加的边距，标签大小改变，而设置外边距设置自身边框到另一个容器边框之间的距离
2.使用line-height设置文字垂直居中（line-height：设置行间的距离（行高））。图片本身的高度为100px，建议将header高度设置为100px，即修改为：
#header { background-image: url(http://climg.mukewang.com/59093e9c00016ce303000100.png); background-repeat: no-repeat; background-position: 0,0; text-align: right; height: 100px; background-color: black; font-size: 20px; line-height: 100px; }如果解决了您的问题，请采纳。祝学习愉快！
0
相似问题