我的网页顶部的空白区域答案

【问题标题】：White space on top of my webpage我的网页顶部的空白区域
【发布时间】：2015-03-19 05:40:24
【问题描述】：

谁能帮帮我？我的页面顶部和 div 容器之间有一些空白，我不知道为什么：http://iwokolasinski.com/wtfq/

@optimus203 在浏览器中查看我的 HTML 时，我可以看到它搞砸了。但这是我的 header.php 文件，似乎还可以。我是一个新手，我正在尝试创建 wordpress + bootstrap 主题。我不知道我做错了什么...... :(

 <html lang="en">
      <head>
        <meta charset="utf-8">
        <title><?php wp_title('|',1,'right'); ?> <?php bloginfo('name'); ?></title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!--Styles -->
        <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Lobster|Khula&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <?php wp_enqueue_script("jquery"); ?>
        <?php wp_head(); ?>
      </head>

      <body>
      <div class="container-fluid kol">

【问题讨论】：

正文中有一些换行符：<body> <meta charset="utf-8">

标签： css wordpress twitter-bootstrap

【解决方案1】：

这是当前浏览器的默认设置。你可以通过这样设置你的 CSS 来覆盖它：

html, body {
    margin: 0;
    padding: 0;
}

【讨论】：

【解决方案2】：

你的 HTML 都搞砸了。你在 body 标签中有你的 head 内容，还有其他问题。

<html lang="en">
<head>
    <meta charset="utf-8">
    <title> WTF Design</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--Styles -->
    <link href="http://iwokolasinski.com/wtfq/wp-content/themes/mywtftheme/style.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Lobster|Khula&amp;subset=latin,latin-ext,cyrillic" rel="stylesheet" type="text/css">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

        <link rel="alternate" type="application/rss+xml" title="WTF Design » główna Kanał z komentarzami" href="http://iwokolasinski.com/wtfq/?feed=rss2&amp;page_id=5">
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-includes/js/jquery/jquery.js?ver=1.11.1"></script>
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-content/themes/mywtftheme/bootstrap/js/bootstrap.js?ver=4.1.1"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://iwokolasinski.com/wtfq/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://iwokolasinski.com/wtfq/wp-includes/wlwmanifest.xml"> 
<meta name="generator" content="WordPress 4.1.1">
<link rel="canonical" href="http://iwokolasinski.com/wtfq/">
<link rel="shortlink" href="http://iwokolasinski.com/wtfq/">
</head>
<body>

  <div class="container-fluid kol">    <h1>główna</h1>  
    <h1 style="text-align: center;">Heading 1</h1>
<h2 style="text-align: center;">Heading 2</h2>
<h3 style="text-align: center;">Content</h3>
<p style="text-align: center;">Paragraph</p>

    
      <footer>
        <p>footer</p>
      </footer>

    </div> <!-- /container -->


 </body>
 </html>

【讨论】：

这并不能回答问题。
你有没有试过用上面的代码替换你的代码？它创造了空间，因为你的结构搞砸了。
我不是提问者。这可能不是原因。
正如 Borislav Ivanov 提到的，和标签之间有换行符。删除这些将解决问题。但拥有正确的基础设施也是一个好主意。
我删除了换行符，但没有解决问题...为什么我的body标签之间全是head内容？在我的 header.php 文件中，head 内容放在 head 标签之间。

【解决方案3】：

我将此添加到您的 <head> 部分的末尾并且它有效：

<style>
  body {
    margin-top:-25px;
  }
</style>

【讨论】：