<分区>
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>最佳答案
您需要将 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>关于html - 制作网格布局时出现白线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55092436/