0

I was wondering how to remove the vertical space between a unordered list and div. I know it's possible with using - margins, but I have a feeling that isn't really a clean method.

This is my code:

 .menu {
   list-style-type: none;
   background-color: #660066;
 }
 .menu li {
   display: inline;
   padding-left: 40px;
   padding-right: 40px;
 }
 .div {
   width: 100%;
   height: 500px;
   background-color: #660066;
 }
<nav>
  <ul class="menu">
    <li>Check 1</li>
    <li>Check 2</li>
    <li>Check 3</li>
    <li>Check 4</li>
  </ul>
</nav>
<article class="div">
jbutler483
  • 24,074
  • 9
  • 92
  • 145
user3043427
  • 37
  • 6

3 Answers3

3

In this case your ul simply has standard margin on top and bottom. margin: 0; solves this.

jsfiddle

ul{
    margin: 0;
}
oshell
  • 8,923
  • 1
  • 29
  • 47
1

Always do a reset like shown below for both UL and LI. That way spaces will only be present when you apply them by yourself.

ol, ul {
  margin: 0;
  padding: 0;
}

Click here to see why it is important to set a reset.

Sleek Geek
  • 4,638
  • 3
  • 27
  • 42
0

You have to set up your position since you are going to move in close proximity to the original location your position will be relative from there you move can move it up or down , it should look like this

.div

position:relative;

bottom:30px;

JuanJose Jaramillo
  • 1