2015-07-10 57 views
0

好的,所以我讓我的標題具有我想要的大小和設計,並決定將其設置爲固定標題。但每當我做位置:固定;它添加了一些填充,看起來像在標題的底部。我似乎無法弄清楚如何擺脫它。固定標題爲標題添加空間

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<title>FatHead | Blog</title> 
<link href='http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800|Muli:400,300italic,400italic' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="css/style.css" type="text/css"> 
</head> 
<body> 
<div class="header"> 
    <div class="logo"> 
     <h1 id="logo-large">FAT</h1> <h1 id="logo-small">HEAD</h1> 
    <nav> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
      <li><a href="#">Categories</a></li> 
     </ul> 
    </nav> 
    </div> 
</div> 
<div class="main-content"> 
    </div> 
</body>  
</html> 

CSS:

/*********************************** 
      LOGO 
***********************************/ 

.header{ 
background-color: skyblue; 
margin:0; 
padding:0; 
width: 100%; 


} 

.logo{ 
text-align: left; 
display: block; 
margin:0 15px 15px 15px; 

} 

#logo-large{ 
display: inline; 
font-size: 3em; 
font-weight: 200%; 
font-family: 'Dosis' , sans-serif; 
} 

#logo-small{ 
display: inline; 
font-weight:0; 
font-size: 2.5em; 
font-family: 'Dosis' ,sans-serif; 
} 


/************************************ 
      NAVIGATION 
************************************/ 

nav ul{ 
list-style-type:none; 
} 

nav{ 
display:inline; 
float: right; 
} 

nav ul li{ 
display: inline-block; 
padding: 5px 0px; 
margin: 0; 

} 

nav ul li a{ 
text-decoration: none; 
padding:20px 12px 12px 12px; 
color:black; 
font-family: 'Muli', sans-serif; 
font-size: 1.25em; 

} 

nav ul li a:active, nav ul li a:hover{ 
background-color: deepskyblue; 
color: white; 
} 



/************************************* 
      main content 
*************************************/ 




body{ 
margin:0; 
padding:0; 
} 

回答

0

之前或之後的標籤,確保沒有空格。

0

嘗試此,看到了差異:

的NL後的各圖像的圖像之間增加了空間,而串行化在一行將允許餘量和填充控制的所期望的效果

<style type="text/css"> 
    .foo {margin:0px; padding:0px; width:100px;} 
</style> 
<div> 
<img class="foo" src="../Images/Karon.jpg" /> 
<img class="foo" src="../Images/Karon.jpg" /> 
<img class="foo" src="../Images/Karon.jpg" /> 
<img class="foo" src="../Images/Karon.jpg" /> 
</div> 

<div><img class="foo" src="../Images/Karon.jpg" /><img class="foo" src="../Images/Karon.jpg" /><img class="foo" src="../Images/Karon.jpg" /><img class="foo" src="../Images/Karon.jpg" /></div>