首页 > 代码库 > css盒子模型 padding
css盒子模型 padding
注意：
行内元素的内外边距的top和bottom是不起作用的，想让他起作用要让他变成块元素加：display：bloock
注意：
如果元素设置了背景，那么背景会填充到内容区+边距区
利用padding设置导航条练习：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/reset.css"/>
<style type="text/css">
ul li{list-style: none; height: 35px; }
ul li{float: left;display: block; padding: 0px 30px;
background: url("img/百度.png") no-repeat; background-size: 28px;
background-position: 1px 7px;
}
a{text-decoration: none;color: black; font-family: "microsoft sans serif";z-index: 100;
}
a:hover{background-color: blue;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.mamicode.com/#">首页</a></li>
<li><a href="http://www.mamicode.com/#">量贩装</a></li>
<li><a href="http://www.mamicode.com/#">生鲜区</a></li>
<li><a href="http://www.mamicode.com/#">企业采购</a></li>
<li><a href="http://www.mamicode.com/#">家电区</a></li>
</ul>
</body>
</html>
显示如下：
css盒子模型 padding