Margin-top doesn't work when display is set to inline

Question

I am working from a tutorial but wanted to try it out myself first. The problem is that while using hover over the link, the background color change touches the topmost of the navbar but doesn't touch the bottom of it.

margin-top doesn't work when the display is set to inline and I've tried padding and similar solutions. Here is my code:

*{
    padding: 0;
    margin:0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.logo .text-primary {
    color: #85b84b;
}

a:hover{
    background: #85b84b;
    border-radius: 5px;
}

nav{
    background: #444;
    color: #f4f4f4;
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding: 1rem;
}

nav li{
    list-style: none;
    display: inline;
    padding: 1rem;
}

nav a{
    text-decoration: none;
    color: #f4f4f4;
    padding: 1rem;
}

Its html code is:

<nav>
  <h1 class="logo">
     <span class="text-primary">
     <i class="fas fa-book-open"></i> Edge</span>Ledger
  </h1>
  <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">What</a></li>
     <li><a href="#">Who</a></li>
     <li><a href="#">Contact</a></li>                
  </ul>
</nav>

Please replace "display:inline;" with "display:inline-block;" and add "vertical-align:middle;" in "nav li" selectore. Note - margin-top and margin-bottom will not work with display:inline. — Prakash Rajotiya, Sep 06 '19 at 06:46
You may want to check out this https://stackoverflow.com/questions/7611030/css-display-inline-block-does-not-accept-margin-top — Scott, Sep 06 '19 at 06:50

score 1 · Answer 1 · answered Sep 06 '19 at 06:53

1

margin-top and margin-bottom doesn't work for inline elements. Try changing the display to inline-block to provide margins or paddings vertically(top, bottom).

answered Sep 06 '19 at 06:53

anirudh chauhan

84
6

Divyesh patel · Answer 2 · 2019-09-06T07:16:59.103

<style>
    ul#menu
    {
        margin: 0 0 5px;
        padding: 0;
        text-align: right;
        float: right;
    }

    ul#menu li
    {
        float: left;
        list-style: none;
        padding-left: 15px;
    }
</style>


<nav>
    <h1 class="logo">
        <span >
            <i ></i> Edge</span>Ledger
    </h1>
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">What</a></li>
        <li><a href="#">Who</a></li>
        <li><a href="#">Contact</a></li>                
    </ul>
</nav>

Try this one it works for me. Use float property

score 0 · Accepted Answer · answered Sep 06 '19 at 07:31

you just have to make align-items:center it will make the things center.

*{
    padding: 0;
    margin:0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.logo .text-primary {
    color: #85b84b;
}

a:hover{
    background: #85b84b;
    border-radius: 5px;
}

nav{
    background: #444;
    color: #f4f4f4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

nav li{
    list-style: none;
    display: inline;
    padding: 1rem;
}

nav a{
    text-decoration: none;
    color: #f4f4f4;
    padding: 1rem;
}

<nav>
  <h1 class="logo">
     <span class="text-primary">
     <i class="fas fa-book-open"></i> Edge</span>Ledger
  </h1>
  <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">What</a></li>
     <li><a href="#">Who</a></li>
     <li><a href="#">Contact</a></li>                
  </ul>
</nav>

Margin-top doesn't work when display is set to inline

3 Answers3