CODEWITHSUNDEEP
htmlcss
pedroyanky
pedroyanky

Reputation: 323

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?

Upvotes: 0

Views: 55

Answers (1)

n1kkou
n1kkou

Reputation: 3142

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.

Upvotes: 2

Related Questions