ナビゲーションメニューのマージン

Question

CSS/HTMLを学習していますが、ナビの作成に問題があります。 Mの間

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding: 15px 20px; 
 
    margin: 0; 
 
    height: 35px; 
 
} 
 

 
li:hover { 
 
    background-color: #232323; 
 
    border-bottom: 3px solid #e24a4a; 
 
    height: 32px; 
 
    cursor: pointer; 
 
}

<nav> 
 
    <ul> 
 
    <li>M1</li> 
 
    <li>M2</li> 
 
    <li>M3</li> 
 
    <li>M4</li> 
 
    <li>M5</li> 
 
    </ul> 
 
</nav>

マージンです。私はそれを望んでいない。私はそれらを削除しようとしたが、何もしなかった。間

マージンMの

どのように私はそれを削除することができますか？

Answer 1

私はあなたが何かを必要と思う。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
li { 
 
    padding: 15px 0; 
 

 
    display: inline-block; 
 
    margin: 0; 
 
    height: 35px; 
 
} 
 

 
li:hover { 
 
    padding: 15px 20px; 
 

 
    background-color: #232323; 
 
    border-bottom: 3px solid #e24a4a; 
 
    height: 32px; 
 
    cursor: pointer; 
 
}

<nav> 
 
    <ul> 
 
    <li>M1</li> 
 
    <li>M2</li> 
 
    <li>M3</li> 
 
    <li>M4</li> 
 
    <li>M5</li> 
 
    </ul> 
 
</nav>

Answer 2

CBroeを掲載するリンクに与えられた詳細を読む...あなたは、ソリューションを提供します。私の意見では、 "フレックスボックス"と "マイナスマージン"の両方のソリューションはかなり良いトリックです。ここで

あなたが行く：

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    border-top: 1px solid #000000; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding: 15px 20px; 
 
    margin-right: -4px; /* negative margin */ 
 
    height: 35px; 
 
} 
 

 
li:hover { 
 
    background-color: #232323; 
 
    border-bottom: 3px solid #e24a4a; 
 
    height: 32px; 
 
    cursor: pointer; 
 
}

<nav> 
 
    <ul> 
 
    <li>M1</li> 
 
    <li>M2</li> 
 
    <li>M3</li> 
 
    <li>M4</li> 
 
    <li>M5</li> 
 
    </ul> 
 
</nav>