[CSS]padding小用

最终效果


html
<div id="navBar"> <ul> <li><a id="index" href="#">Index</a></li> <li><a id="tagcloud" href="#">TagCloud</a></li> <li><a id="guestbook" href="#">GuestBook</a></li> <li><a id="admin" href="#">Admin</a></li> </ul> </div> <p>

css
ul{<br/> margin: 0;<br/> text-transform: capitalize; <br/>}<br/>li{<br/> list-style: none;<br/> float: left; <br/>}<br/>li a{<br/> display:block;<br/> text-align:center;<br/> height: 30px;<br/> line-height: 30px;<br/> text-transform:uppercase;<br/> font-size:12px;<br/> font-weight: 700;<br/> margin-top: 10px;<br/> padding-top: 30px;<br/> color: #f66; <br/> text-decoration: none;<br/>}<br/><br/>#index{<br/> background: url(img/em_parents.gif) no-repeat;<br/> width: 65px;<br/>}<br/>#tagcloud{<br/> background: url(img/em_professionals.gif) no-repeat; <br/> width:98px;<br/>}<br/>#guestbook{<br/> background: url(img/em_people.gif) no-repeat; <br/> width:130px;<br/>}<br/>#admin{<br/> background: url(img/em_interested.gif) no-repeat; <br/> width:139px;<br/>}<br/>

首先
li a{<br/> display:block; /*~~使a块状显示~~*/<br/> height: 30px; /*~~高度30px~~*/<br/> line-height: 30px; /*~~文字垂直居中~~*/<br/>}<br/>
之后
li a{<br/> padding-top: 30px;<br/>}<br/>
使链接内的文字与上边沿形成30px空白间隔