需要幫助消除Flexbox頁面上的空白頁面

-1

我是一位學習使用Flexbox css設計佈局的新開發人員。我在刪除頁面頂部的空白處遇到問題。我試過將body margin和padding設置爲零，但這不起作用。似乎工作的唯一的東西是在我的包裝上放一個-18px的邊距，但是這不會解決跨不同瀏覽器的問題。任何幫助，將不勝感激。這裏是我的代碼和css：需要幫助消除Flexbox頁面上的空白頁面

HTML從這裏開始

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Flexbox Tutorial</title> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 

<div class="wrapper"> 
    <div class="box box1">1</div> 
    <div class="box box2">2</div> 
    <div class="box box3">3</div> 
    <div class="box box4">4</div> 
    <div class="box box5">5</div> 
    <div class="box box6">6</div> 
    <div class="box box7">7</div> 
    <div class="box box8">8</div> 
    <div class="box box9">9</div> 
    <div class="box box10">10</div> 
    </div><!--end of wrapper--> 

    </body> 
    </html>

HTML到此爲止

CSS從這裏開始

body {margin: 0; 
     padding: 0;} 

/* Some default styles to make each box visible */ 
    .box { 
     color: white; 
     font-size: 100px; 
     text-align: center; 
     text-shadow: 4px 4px 0 rbga(0,0,0,0.1); 
} 
    .box p { 
     font-size: 20px; 
} 
/* Colours for each box */ 
    .box1 {background: #1abc9c;} 
    .box2 {background: #3498db;} 
    .box3 {background: #9b59b6;} 
    .box4 {background: #34495e;} 
    .box5 {background: #f1c40f;} 
    .box6 {background: #e67e22;} 
    .box7 {background: #e74c3c;} 
    .box8 {background: #bdc3c7;} 
    .box9 {background: #2ecc71;} 
    .box10 {background: #16a085;} 

/* We start writing out flexbox here. */ 

.wrapper {display: flex; 
     flex-direction: row; 
} 

CSS ends here

來源

2015-10-16 tony

我在Chrome中運行您的代碼，頁面頂部沒有空白。也許你錯過了一些代碼？看看你是否可以發佈重現問題的演示。嘗試使用jsfiddle.net。 –

已經用你的代碼製作了一個[demo]（http://jsfiddle.net/1zjcuhk9/），這很好，可能你錯過了什麼？ –

我沒有看到頂部的任何空白..你有任何css重置或標準器在你的頁面上？ – Praveen

謝謝您的幫助大家。代碼現在工作正常。我認爲我看到的空白或者是由！doctype html標記和html lang =「en」標記之間留下的空格引起的，或者是我用meta charset =「utf-8」標記所犯的錯誤。我最初擁有UTF資本。不知道這兩件事中的任何一件是否導致了空白，但是在我做了這兩項修改之後，刪除了doctype和html標記之間的空格，並且將utf文件變成了小寫字母，結果空白不見了。謝謝你的幫助！

來源

2015-10-17 13:27:06 tony

需要幫助消除Flexbox頁面上的空白頁面

回答

相關問題