消除填充的麻煩

我有一段時間搞清楚如何降低/刪除我的標題框中的填充。我附上了相關的html和css代碼，並截取了我正在處理的內容。我試圖降低頂部和標題，標題和navBar，navBar和底部之間的間距。如果有人願意查看代碼，我會非常感激。謝謝！消除填充的麻煩

enter image description here

HTML代碼

<nav> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Tutorials</a> 
     <ul> 
      <li><a href="#">Photoshop</a></li> 
      <li><a href="#">Illustrator</a></li> 
      <li><a href="#">Web Design</a> 
       <ul> 
        <li><a href="#">HTML</a></li> 
        <li><a href="#">CSS</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Articles</a> 
     <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">User Experience</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Inspiration</a></li> 
</ul> 
</nav>

CSS代碼

#details { 
font-size:16px; 
font-family: Herculanum, "Gill Sans", Optima, Tahoma, sans-serif; 
color:#A36D6A; 
padding:0px; 
} 
#titleName { 
font-size:30px; 
font-family: Chalkduster, "Gill Sans", Optima, Tahoma, sans-serif; 
text-transform: uppercase; 
color:#A32F2B; 
} 
#headerDesign { 
background-color: #2A4557; 
margin:0px; 
border:5px outset #fff; 
text-align:center; 
padding-top:10px; 
padding-bottom:0px; 
font-family: Chalkduster, "Gill Sans", Optima, Tahoma, sans-serif; 
} 
nav ul ul { 
display:none; 
} 

nav ul li:hover > ul { 
display:block; 
} 

nav ul { 
background: #efefef; 
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
padding: 0px 10px; 
border-radius: 10px; 
list-style: none; 
position:relative; 
display:inline-table; 
} 
nav ul:after { 
content:""; 
clear:both; 
display:block; 
} 
nav ul li { 
float:left; 
} 
nav ul li:hover { 
    background:#4b545f; 
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
    } 
nav ul li:hover a { 
color:#fff; 
} 
nav ul li a { 
display:block; 
padding:10px 40px; 
color:#757575; 
text-decoration:none; 
} 
nav ul ul { 
background:#5f6975; 
border-radius:0px; 
padding:0px; 
position:absolute; 
top:100%; 
} 
nav ul ul li { 
    float:none; 
    border-top:1px solid #6b727c; 
    border-bottom: 1px solid #575f6a; 
    position:relative; 
} 
nav ul ul li a { 
    padding: 10px 40px; 
    color:#fff; 
} 
nav ul ul li a:hover { 
    background:#4b545f; 
} 
nav ul ul ul { 
position:absolute; 
left:100%; 
top:0; 
}

來源

2013-07-27 user2228503

不'UL {保證金：0}'工作？您沒有提供標題代碼，因此我無法回答該部分，但如果其'h1' – Sourabh

Reset CSS，我的朋友。

默認情況下，瀏覽器會設置很多東西，邊距和填充就是一個很好的例子。這就是爲什麼如果你嘗試製作一個寬度爲100％的div，它只會達到約95％的寬度。

雖然重置是一個很好的工具，但請確保您查看所有重置的內容。您可能需要對當前的代碼進行一些更改，但通常不會發生任何異常。

Normalize CSS是另一個不錯的選擇。

來源

2013-07-27 01:14:15

重置有時會帶來許多不需要的和不希望的更改，則應該使用'h1 {margin：0}'。使用重置只是爲了擺脫一點「保證金」是一個壞主意 – Sourabh

@NoahKoch發送這首...您必須Reset CSS，因爲Chrome和Firefox有標籤的默認邊距和補。在此之後，最常見的問題是打破padding & width
它會修復此：

*, *:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    zoom: 1; 
}

來源

2013-07-27 01:54:34

消除填充的麻煩

回答

相關問題