<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
ul{
padding: 0;
border-top: 3px solid orange;
border-bottom: 1px solid gray;
}
li{
display: inline-block;
padding: 20px;
}
a{
color: black;
text-decoration: none;
}
li:hover{
background-color:aqua;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">详情</a></li>
<li><a href="#">列表页</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#">客服电话</a></li>
</ul>
</body>
</html>
盒子的实际的大小 = 内容区域的宽度或高度 + 内边距 + 边框
padding
属性用于设置内边距。
是指边框与内容区域之间的距离。
padding-top:
上内边距
padding-right:
右内边距
padding-bottom:
下内边距
padding-left:
左内边距
注意：
后面跟几个数值表示的意思是不一样的。
padding
会撑开盒子。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
