Attention:
The top and bottom of the inside and outside margins of the inline elements are not working, and want him to work to make him into a block element plus: Display:bloock
Attention:
If the element sets a background, the background is populated with the content area + margin Area
Use padding to set up the navigation bar exercises:
The code is as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<link rel= "stylesheet" type= "Text/css" href= "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/Baidu. 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>
<body>
<ul>
<li><a href= "#" > Home </a></li>
<li><a href= "#" > Volume Pack </a></li>
<li><a href= "#" > Fresh area </a></li>
<li><a href= "#" > Corporate sourcing </a></li>
<li><a href= "#" > Home Appliance Zone </a></li>
</ul>
</body>
Shown below:
CSS box model padding