Question

我正在制作网格布局，并在屏幕周围获得这些白线。我的代码中没有任何网格空白。它也只在屏幕的两侧。是因为标题/侧边栏在包装器中？然后，如何使侧边栏贴在屏幕的一侧。我是网格的新手，所以我不确定如何使侧边栏保持在一边。

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grids</title>
  <style>


html {
  background-color: rgb(41, 81, 134);
 height: 100%; 
}

body {
 height: 100%; 
}

.wrapper{
  height: 100vh;
  width:100vh;
  display:grid;
  grid-template-columns:1r 5fr;
  grid-template-rows: 1fr;
  grid-template-areas:
  "header slideshow"
}

.header {
  grid-area: header;
  background-color: #e0c5cf;
  width: 30%;
}


.slideshow {
  grid-area: slideshow;
}
 </style>

</head>
<body>

  <div class="wrapper">
    <div class="header">
        SOME TEXT Lorem ipsum dolor sit amet,
<div="text">

    </div>

    <div class="slideshow">
    </div>

  </div>
</body>
</html>

Answer 1

您需要将margin: 0添加到您的body元素中。

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grids</title>
  <style>


html {
  background-color: rgb(41, 81, 134);
 height: 100%; 
}

body {
 height: 100%;
 margin: 0;
}

.wrapper{
  height: 100vh;
  width:100vh;
  display:grid;
  grid-template-columns:1r 5fr;
  grid-template-rows: 1fr;
  grid-template-areas:
  "header slideshow"
}

.header {
  grid-area: header;
  background-color: #e0c5cf;
  width: 30%;
}


.slideshow {
  grid-area: slideshow;
}
 </style>

</head>
<body>

  <div class="wrapper">
    <div class="header">
        SOME TEXT Lorem ipsum dolor sit amet,
<div="text">

    </div>

    <div class="slideshow">
    </div>

  </div>
</body>
</html>

进行网格布局时出现白线

1 个答案: