PHPの左上隅に奇妙な余白があります

こんにちは、私はブートストラップでPHPウェブページを構築しています。私は体の上、右、左に余白があります。 this質問に続いて、私はnotepad ++をダウンロードし、BOMなしでutf-8に変換しましたが、余白はまだそこにあります。ここで PHPの左上隅に奇妙な余白があります

は、ここに私のCSSファイル

.texts{ 
    color: white; 
} 

.mainbody{ 
    margin-top: 0; 
    max-width: 1200px; 
} 
.banner{ 
    height : 600px; 
    width : 100%; 
    max-width:100%; 
    background-image: url("restrooms.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

.bannertext{ 
    color: white; 

} 
.bannerbg{ 
    background-color: #a52f0b; 
    opacity: 0.7; 
    margin-left: 40px; 
    height :150px 

} 
.dashform{ 
    margin-top: 10px; 
    margin-bottom: 10px; 
    border-style: solid; 
    border-width: 1px; 
} 
.mtop{ 
    margin-top: 6px; 
} 
.blbc{ 
    background-color: #424242; 


} 
.im-centered{margin: auto; max-width: 100%;}

あるindex.phpの

<?php 
include ('header.html'); 
?> 
<div class="w3-container w3-center"> 
<div class="w3-container banner"> 
<div class="w3-container w3-display-left bannerbg"> 
    <h2 class="w3-container bannertext">Βρες το κατάλληλο    εστιατόριο<br>.....στην κατάλληλη τιμή</h2> 
    <button class="w3-btn w3-red w3-round-xxlarge">Βρές Εστιατόριο</button> 

</div> 
</div> 
</div> 
</body> 
</html>

header.html

<!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/html1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang:"en"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"/> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"/> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="rules.css"/> 
    <title>Αρχική</title> 
    <style type="text/css" media="print"> 
    @page 
    { 
     size: auto; /* auto is the initial value */ 
     margin: 0mm; /* this affects the margin in the printer settings  */ 
    } 

    </style> 
    </head> 
    <body> 
    <nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="index.php">Δυναμικό Τιμολόγιο</a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="index.php">Αρχική</a></li> 
      <li><a href="#">Ολα Τα Καταστήματα</a></li> 
    <li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav>

であり、ここで出力のsreenshotある

私には何が欠けていますか？

出典

2017-01-28 vaggelis

あなたが提供するHTMLを画像に何複製されません。 http://codepen.io/anon/pen/egeQzg –

体がそうあなたがする必要があるすべてはそれらを剃り落とすで、すべてのブラウザのデフォルトの余白があります。

html, 
body { 
    margin: 0; 
    padding:0; 
    text-align: center; 
}

出典

2017-01-28 22:00:22 takethefake

ブートストラップを使っているので、OPの問題ではないはずです。ブートストラップは 'body {margin：0; } ' –

デフォルトでは、ほとんどのブラウザでは、本体にマージン/パディングを追加します。

は、あなたのCSSファイルの先頭に以下を追加します。

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

出典

2017-01-28 22:00:36 Tomas

ブートストラップを使っているので、OPの問題ではないはずです。ブートストラップは' body {margin：0; } '。さらに、それはtakethefakeと同じ答えです。 –

良いキャッチ：ブートストラップと私は他の答えの前に投稿しました – Tomas

私はあなたの前に12秒持っていました：D – takethefake

PHPの左上隅に奇妙な余白があります

答えて

関連する問題