时间戳

首页 > 解决方案 > 制作网格布局时的白线

html - 制作网格布局时的白线

问题描述

我正在制作一个网格布局，并在我的屏幕周围显示这些白线。我的代码中没有任何网格间隙或任何内容。它也只在我的屏幕两侧。是因为标题/侧边栏在包装器中吗？那么我将如何使侧边栏粘在屏幕的一侧。我是网格新手，所以我不知道如何让侧边栏保持在一边..

在此处输入图像描述

<!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>

标签： htmlcss

解决方案

您需要添加margin: 0到您的身体元素。

<!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>

推荐阅读