如何删除无序列表和div之间的空格

Question

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"> 

Answer 1

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

jsfiddle

ul{
    margin: 0;
}

Answer 2

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.

Answer 3

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;

---