CODEWITHSUNDEEP
css
Hassan Baig
Hassan Baig

Reputation: 15804

Navigation bar top and bottom padding through CSS

I'm trying to increase the top and bottom padding in the following, but can't get it to work. I.e. notice the padding top and bottom code in ul.navbar li a. It has no effect. What's an alternative? Please advise. 

    ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size: 90%;
    text-align: center;
    }

    ul.navbar li {
        margin: auto;
        display: inline;
        border-right: 1px solid #ffb366;
    }

    ul.navbar li:first-child {
        border-left: 1px solid #ffb366;
    }

    ul.navbar li a {
        display: inline;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 30px;
        padding-bottom: 30px;
        text-decoration: none;
    }

    ul.navbar li a:hover {
        background-color: #e67300;
    }
<ul class="navbar">
<li><a href="/">Home</a></li><li><a href="#">Photos</a></li><li><a href="#">Videos</a></li><li><a href="#">Logout</a></li>
</ul>

I don't want to disturb the navigation bar's layout in any way - hence can't include the padding top and bottom option in <ul> - that messes up the layout and the hover both.

Upvotes: 0

Views: 1892

Answers (2)

Stickers
Stickers

Reputation: 78676

9.4.2 Inline formatting contexts

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.

You can set it to inline block, if you need to apply vertical paddings etc.

ul.navbar li a {
  display: inline-block;
}

Upvotes: 1

Dekel
Dekel

Reputation: 62536

inline elements don't have top and bottom padding. If you want to these padding you must use block or inline-block elements:

ul.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ff9933;
  font-size: 90%;
  text-align: center;
}

ul.navbar li {
  margin: auto;
  display: inline-block;
  border-right: 1px solid #ffb366;
}

ul.navbar li:first-child {
  border-left: 1px solid #ffb366;
}

ul.navbar li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 30px;
  padding-bottom: 30px;
  text-decoration: none;
}

ul.navbar li a:hover {
  background-color: #e67300;
}
<ul class="navbar">
<li><a href="/">Home</a></li><li><a href="#">Photos</a></li><li><a href="#">Videos</a></li><li><a href="#">Logout</a></li>
</ul>

Upvotes: 0

Related Questions