CSSを使ったナビゲーションバーの上下のパッド

Question

以下では、上下のパッドを増やそうとしていますが、動作させることはできません。私。パディングの上部と下部のコードはul.navbar li aにあることに注意してください。それは効果がありません。代替手段は何ですか？お知らせ下さい。

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>

私はどのような方法で、ナビゲーションバーのレイアウトを邪魔したくない - レイアウトやホバーを台無しに - <ul>でパディング上部と下部のオプションを含めることはできませんので、どちらも。コンテキストをフォーマットインラインで

Answer 1

inline要素は、上下のパディングを持っていません。

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>

：あなたはこれらのパディングにしたい場合は、 blockや inline-block要素を使用する必要があります。

Answer 2

9.4.2 Inline formatting contexts

、ボックスを含むブロックの先頭から始まる、水平に次々に配置されています。水平マージン、境界線、およびパディングは、これらのボックスの間で尊重されます。

あなたは垂直パディングを適用する必要がある場合等、インラインブロックに設定することができます

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