Jimmy Mac Jimmy Mac - 1 year ago 51
HTML Question

Why aren't my "<li>"s moving to the top when using margin-top

I am having a problem when using margin-top on

elements. I am trying to have my list align to the top of the page but my
element isn't moving to the top as it should:

<div class="main_header">
<li><a href="/about">About Me</a></li>
<li><a href="/Order">Order</a></li>
<li><a href="/Designs">Designs</a></li>
<li><a href="/Contact">Contact</a></li>

Then here is my css

.main_header li a {
margin-top: -20px;
display: inline-block;

I hope someone can help me thank you.

Answer Source

If your looking for a inline navigation style ul change the css to:

.main_header li {
margin-top: -20px;
display: inline-block;

If your looking to move the whole list up try:

ul {

If your looking to move just the li elements closer to each other try:

.main_header li {
display: block;

Note - if your looking to have a inline navigation, use the <nav> html element instead to reduce styling, as it automatically places the links inline

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download