Question

我是一位学习使用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

Answer 1

感谢大家的帮助。代码工作正常。我认为我看到的空白要么是由于！doctype html标签和html lang =“en”标签之间的空间造成的，要么是我用meta charset =“utf-8”标签造成的错误。我最初使用UTF资本化。不确定这两个东西中的任何一个是否会导致空格，但是在我做了这两个更改之后，删除了doctype和html标记之间的空格，并且将changung UTF变为小写，空格就消失了。谢谢你的帮助！

需要帮助消除flexbox页面顶部的空白区域

1 个答案: