需要帮助消除 flexbox 页面顶部的空白答案

【问题标题】：Need help eliminating white space on top of flexbox page需要帮助消除 flexbox 页面顶部的空白
【发布时间】：2015-10-16 02:48:13
【问题描述】：

我是一名新开发人员，正在学习使用 Flexbox css 设计布局。我在删除页面顶部的空白时遇到问题。我尝试将正文边距和填充设置为零，但这不起作用。唯一可行的方法是在我的包装器上放置 -18px 边距，但这并不能解决不同浏览器的问题。任何帮助，将不胜感激。这是我的代码和css：

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

【问题讨论】：

我正在 Chrome 中运行您的代码，页面顶部没有空格。也许你错过了一些代码？看看你是否可以发布一个重现问题的演示。尝试使用 jsfiddle.net。
已经用你的代码创建了一个demo，这很好 imo，也许你错过了什么？
我在顶部也没有看到任何空白..您的页面上有任何 CSS 重置或规范化器吗？

标签： html css whitespace flexbox

【解决方案1】：

感谢大家的帮助。代码现在工作正常。我认为我看到的空白要么是由 !doctype html 标签和 html lang="en" 标签之间留下的空间引起的，要么是我在 meta charset="utf-8" 标签上犯的错误。我最初将 UTF 大写。不确定这两件事中是否有任何一个导致了空白，但是在我进行了这两项更改之后，删除了 doctype 和 html 标签之间的空格，并将 UTF 更改为小写，空白就消失了。谢谢你的帮助！

【讨论】：