We would like to know how to get rid of space between ul and wrapping element with border.
<!--from www. j a va 2 s . co m-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {
text-align: center;
}
.wrap {
margin: 0px auto;
border: 1px solid #fff;
overflow: auto;
}
.wrap ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.wrap ul li {
display: list-item;
float: left;
margin: 0px;
padding: 0px;
width: 25%;
}
.wrap ul li a {
display: block;
border: 1px solid #fff;
}
.wrap il li a span {
width: 100%;
height: 100%;
float: left;
display: block;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><span>aaaa</span></a></li>
<li><a href="#"><span>bbbb</span></a></li>
<li><a href="#"><span>cccc</span></a></li>
<li><a href="#"><span>dddd</span></a></li>
</ul>
</div>
</body>
</html>
The code above is rendered as follows: