使用多个样式表时浮动标题

目前，我有两个CSS文件，bootstrap.min.css和main.css，后者是一个自定义的文件工作，包含以下

* { 
    margin: 0; 
    padding: 0; 
} 

#heading { 
    padding: 0; 
    margin: 0; 
    border: 0; 
    background-color: #acc7dc; 
    height: 10%; 
    width: 100%; 
    z-index: 10; 
    position: fixed; 
    font-family: 'Merriweather', serif; 
    text-align: center; 
}

该尽我的理解应该开始在标题块屏幕的顶部。但是，有时在测试HTML时，屏幕顶部和标题之间会有一个空格。

的HTML的结构，像这样：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="../static/main.css" > 
     <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'> 
     <title>Trial</title> 
    </head> 
    <body> 
     <div id="heading"> 
      <header> 
       <h1>Trial</h1> 
      </header> 
     </div> 
    </body> 
</html>

我没有其他地方修改此行为。任何想法可能是什么问题？

来源

2016-03-06 Willbur Smith

设置'top：0px！important;'标题可能没有帮助，但也许这值得尝试。 –

由于您正在使用Bootstrap，因此您可以利用.navbar-fixed-top类，该类应该纠正差距。如果你想将自己的自定义styes应用于标题，则只需要同时应用类和id样式：

<div class='navbar-fixed-top' id="heading"> 
    <header> 
     <h1>Trial</h1> 
    </header> 
</div>

来源

2016-03-07 02:39:25 Rarepuppers

使用多个样式表时浮动标题

回答

相关问题