pedroyanky pedroyanky - 17 days ago 8
CSS Question

How can I move this text to the top

I have this navigation with unordered list, I made the

li
display to be inline, And here comes the problem, I am having problem trying to align the text upward, apparently, inline elements doesn't take
margin
and
padding
property.

My codes:

<ul>
<li><a href="#"><h3>Home</h3></a></li>
<li><a href="#"><h3>About</h3></a></li>
<li><a href="#"><h3>Contacr</h3></a></li>
<li><a href="#"><h3>Blog</h3></a></li>
</ul>




ul{
list-style: none;
max-width: 250px;
height: 40px;
background-color: #486348;
margin-top: 20px;
padding: 0;
padding-right: 10px;
padding-bottom: 10px;
padding-top: -10px;
}

li{
display: inline-block;
height: 40px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 0;
border: 1px solid rgba(78,78,78,0.67);
}

a {
color: #fff;
text-decoration: none;
line-height: 1;
}

<ul>
<li><a href="#"><h3>Home</h3></a></li>
<li><a href="#"><h3>About</h3></a></li>
<li><a href="#"><h3>Contacr</h3></a></li>
<li><a href="#"><h3>Blog</h3></a></li>
</ul>





Although a line-height of 1 did do something nice for me, but not enough, so how do I move my text upward neatly?

Answer

In your stylesheet add h3 { margin:0; }. The h3 elements inside the anchors have a default margin value.

Also, to align the text in the middle (vertical alignment), add line-height: 40px; display:block; for the a elements, so they have the same line-height as their parent li.

Comments