如何去除嵌入塊單元上方和下方的空間？

Question

我似乎無法弄清楚如何刪除空間以上和以下我inline block元素如圖所示。

P.S line-height不刪除空間。

這裏是所有元素的CSS。

nav ul li { 
font-size:16px; 
display:inline-block; 
padding:20px; 
border: 3px solid black; 
} 

圖片：

JsFiddle

Answer 1

ul具有由缺省margin和padding，所以重置

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: sans-serif; 
 
} 
 
header { 
 
    background: #00795f; 
 
    width: 100%; 
 
    padding: 40px 0; 
 
    /* 40px top and bottom, 0px left and right */ 
 
    color: white; 
 
    text-align: center; 
 
} 
 
nav { 
 
    background-color: #43a286; 
 
    color: white; 
 
    overflow: hidden; 
 
    padding: 0px; 
 
    text-align: center; 
 
    margin: 0; 
 
} 
 
ul { 
 
/* padding: 0; you may need only the margin */ 
 
    margin: 0 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: inherit; 
 
} 
 
nav ul li { 
 
    font-size: 16px; 
 
    display: inline-block; 
 
    padding: 20px; 
 
    border: 3px solid black; 
 
} 
 
ul li:hover { 
 
    background-color: #399077; 
 
} 
 
section { 
 
    line-height: 1.5em; 
 
    font-size: 1.5em; 
 
    padding: 40px; 
 
    width: 75%; 
 
    margin: 0 auto; 
 
}

<header> 
 
    <h1>Loving it more everyday</h1> 
 
    </header> 
 
    <nav> 
 
    <ul> 
 
     <li> <a href="#" target="_blank"> Home </a> 
 
     </li> 
 
     <li> <a href="#" target="_blank"> About </a> 
 
     </li> 
 
     <li> <a href="#" target="_blank"> Blog </a> 
 
     </li> 
 
     <li> <a href="#" target="_blank"> Shop </a> 
 
     </li> 
 
     <li> <a href="#" target="_blank"> Gallery </a> 
 
     </li> 
 
     <li> <a href="#" target="_blank"> Contact </a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
    <section> 
 
    When you try your best, but you don't succeed. When you get what you want, but not what you need. When you feel so tired, but you can't sleep. Stuck in reverse. And the tears come streaming down your face. When you lose something you can't replace.When 
 
    you love someone, but it goes to waste. Could it be worse? Lights will guide you home. And ignite your bones. And I will try to fix you. And high up above or down below. When you're too in love to let it go. But if you never try you'll never know. 
 
    Just what you're worth. When you try your best, but you don't succeed. When you get what you want, but not what you need. When you feel so tired, but you can't sleep. Stuck in reverse. And the tears come streaming down your face. When you lose something 
 
    you can't replace.When you love someone, but it goes to waste. Could it be worse? Lights will guide you home. And ignite your bones. And I will try to fix you. And high up above or down below. When you're too in love to let it go. But if you never 
 
    try you'll never know. Just what you're worth 
 
    </section>