HTML Element Style How to - Get rid of space between ul and wrapping element with border








Question

We would like to know how to get rid of space between ul and wrapping element with border.

Answer


<!--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: