在PHP頁面左上角的奇怪邊緣

你好傢伙我正在建立一個帶有bootstrap的php網頁，並且在我的頂部，左側和右側有邊距。正在關注this問題我下載了記事本++並轉換爲沒有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>

這裏是輸出的擷取畫面

我錯過了什麼？

來源

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相同的答案。 –

好趕上重新：bootstrap，我張貼在其他答案前 – Tomas

我有12秒鐘之前：D – takethefake

在PHP頁面左上角的奇怪邊緣

回答

相關問題