<div class="navbar1">
  <ul class="padding-none">
    <li>height:100%<br/>margin</li>
  </ul>
  <ul class = "margin-none padding">
    <li>height:100%<br/>padding</li>
  </ul>
  <ul class = "margin-none padding-none">
    <li>height:100%<br/>no margin<br/>no padding</li>
  </ul>
  <ul class = "padding margin-none" style="height:58px;">
    <li>height:58px<br/>no margin</li>
  </ul>
</div>

.margin-none {
  margin: 0px;
}

.padding-none {
  padding: 0px;
}

.padding {
  padding: 10px;
}

.navbar1 {
  width: 100%;
  height: 80px;
  float: left;
  background: coral;
}

.navbar1 ul {
  float: left;
  height: 100%;
  width: 20%;
  border: 1px solid;
}

.navbar1 li {
  list-style: none;
  height: 100%;
  background: burlywood;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.