Question

我正在尝试创建某种简单的着陆页，但问题是我的图像周围有白色边框。这就是它的样子

header {
  font-family: Arial, Helvetica, sans-serif;
  background-image: url(https://images4.alphacoders.com/556/thumb-1920-556712.jpg);
  height: 100vh;
  background-image: url(https://images4.alphacoders.com/556/thumb-1920-556712.jpg);
  background-size: cover;
  background-position: center;
  margin-bottom: 50px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }

header h1 {
  font-size: 100px; }

p {
  width: 600px;
  margin: 0 auto 20px; }

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Near-Reality Craft</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="assets/img/favicons/favicon.ico">
  <link rel="stylesheet" href="assets/css/main.css" />
</head>

<body>
  <header>
    <h1>Near-Reality Craft</h1>
    <h4>We are online!</h4>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra eleifend lorem nec ornare. Morbi a malesuada urna, vitae maximus lorem. Fusce faucibus tortor a mi sodales, vel volutpat ipsum suscipit. Ut cursus elementum arcu rutrum commodo. Aenean vehicula, risus in scelerisque auctor, sapien leo egestas ipsum, ac feugiat mi enim et orci. Nunc malesuada id dolor in luctus. Praesent semper accumsan imperdiet. Donec quis gravida lectus. Nunc lobortis lorem at dapibus finibus. Nunc commodo ultricies turpis, non porttitor arcu pharetra in. In tempus enim ut condimentum vestibulum. Fusce mattis ipsum a ipsum tempor, vel volutpat est gravida. Nunc aliquam auctor magna vitae semper. Proin dictum, nulla sed dapibus dignissim, lectus nisl lacinia libero, eget auctor nisl est non diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  <p>Sed ultricies velit non dictum feugiat. Vestibulum fringilla et mi a blandit. Pellentesque lacus lacus, scelerisque nec ultricies in, efficitur ac quam. Sed nec erat quis nunc tincidunt pretium. Curabitur luctus quam lacus, eu iaculis orci tempus ut. Praesent sit amet convallis risus. Nulla suscipit mi velit, non mollis nunc porttitor sit amet. Nulla lobortis hendrerit lorem, non venenatis augue. Mauris nec volutpat nisi, condimentum tristique ex.</p>
  <p>Mauris tortor lorem, congue vitae mi quis, ultricies pretium neque. Aliquam augue mi, hendrerit ut quam vitae, vehicula semper libero. Ut dignissim lacus vel lobortis tristique. Duis luctus odio quis lectus consectetur suscipit. Praesent lobortis, nibh vel cursus fringilla, lacus felis faucibus orci, in vulputate velit mi id justo. Curabitur arcu sapien, consequat sit amet nisl at, sagittis lacinia leo. Praesent sit amet iaculis ante. Maecenas venenatis dolor sed arcu luctus consectetur. Proin non vehicula sem. Duis vulputate dignissim elementum. Phasellus sagittis sit amet dolor nec dignissim.</p>
  <p>Nulla nec molestie neque. Curabitur iaculis ipsum tempor, tincidunt nibh non, pellentesque massa. Etiam scelerisque facilisis turpis. Nunc interdum iaculis pellentesque. Sed lacus mi, vulputate interdum nisi in, auctor consequat neque. Maecenas ultrices elementum ligula. Aliquam vel nulla sit amet augue consectetur aliquet. Proin eget molestie nunc. Quisque porta sem vestibulum magna condimentum condimentum. Praesent sit amet lobortis tellus. Ut tellus enim, sollicitudin sit amet elit ac, molestie tristique mauris. Duis urna mauris, pellentesque vitae nunc vitae, commodo consequat magna. Donec lobortis, lectus ac aliquam dictum, est dolor maximus ante, sed gravida tellus sem ac dolor. Ut eu interdum metus.</p>
  <p>Nunc lobortis laoreet erat eget maximus. In hac habitasse platea dictumst. Duis fringilla lacus eget placerat laoreet. Duis vulputate lectus eu turpis cursus maximus. Suspendisse nec scelerisque quam. Nulla bibendum facilisis porta. Sed laoreet auctor massa venenatis scelerisque. Pellentesque eget tristique lacus, eu accumsan enim. Praesent non placerat metus. Nulla facilisi. Pellentesque tincidunt tortor magna, vel varius arcu tristique et. Morbi tristique, dolor sit amet sodales ornare, erat nisi rutrum metus, vitae rhoncus purus augue vitae purus. Donec viverra eget libero quis molestie. Fusce quis congue magna, eget elementum erat. Sed sodales pellentesque est volutpat eleifend.</p>
</body>

</html>

我做错了什么，是否有某些属性我可以用来使图像周围的边框消失？我在youtube上关注了一个教程，对他来说没有边框。 https://www.youtube.com/watch?v=hExwnLlj2xk

Answer 1

设置您的身体margin: 0; padding: 0;

＆＃13;

body{ margin: 0; padding: 0;}
header {
  font-family: Arial, Helvetica, sans-serif;
  background-image: url(https://images4.alphacoders.com/556/thumb-1920-556712.jpg);
  height: 100vh;
  background-image: url(https://images4.alphacoders.com/556/thumb-1920-556712.jpg);
  background-size: cover;
  background-position: center;
  margin-bottom: 50px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }

header h1 {
  font-size: 100px; }

p {
  width: 600px;
  margin: 0 auto 20px; }

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Near-Reality Craft</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="assets/img/favicons/favicon.ico">
  <link rel="stylesheet" href="assets/css/main.css" />
</head>

<body>
  <header>
    <h1>Near-Reality Craft</h1>
    <h4>We are online!</h4>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra eleifend lorem nec ornare. Morbi a malesuada urna, vitae maximus lorem. Fusce faucibus tortor a mi sodales, vel volutpat ipsum suscipit. Ut cursus elementum arcu rutrum commodo. Aenean vehicula, risus in scelerisque auctor, sapien leo egestas ipsum, ac feugiat mi enim et orci. Nunc malesuada id dolor in luctus. Praesent semper accumsan imperdiet. Donec quis gravida lectus. Nunc lobortis lorem at dapibus finibus. Nunc commodo ultricies turpis, non porttitor arcu pharetra in. In tempus enim ut condimentum vestibulum. Fusce mattis ipsum a ipsum tempor, vel volutpat est gravida. Nunc aliquam auctor magna vitae semper. Proin dictum, nulla sed dapibus dignissim, lectus nisl lacinia libero, eget auctor nisl est non diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  <p>Sed ultricies velit non dictum feugiat. Vestibulum fringilla et mi a blandit. Pellentesque lacus lacus, scelerisque nec ultricies in, efficitur ac quam. Sed nec erat quis nunc tincidunt pretium. Curabitur luctus quam lacus, eu iaculis orci tempus ut. Praesent sit amet convallis risus. Nulla suscipit mi velit, non mollis nunc porttitor sit amet. Nulla lobortis hendrerit lorem, non venenatis augue. Mauris nec volutpat nisi, condimentum tristique ex.</p>
  <p>Mauris tortor lorem, congue vitae mi quis, ultricies pretium neque. Aliquam augue mi, hendrerit ut quam vitae, vehicula semper libero. Ut dignissim lacus vel lobortis tristique. Duis luctus odio quis lectus consectetur suscipit. Praesent lobortis, nibh vel cursus fringilla, lacus felis faucibus orci, in vulputate velit mi id justo. Curabitur arcu sapien, consequat sit amet nisl at, sagittis lacinia leo. Praesent sit amet iaculis ante. Maecenas venenatis dolor sed arcu luctus consectetur. Proin non vehicula sem. Duis vulputate dignissim elementum. Phasellus sagittis sit amet dolor nec dignissim.</p>
  <p>Nulla nec molestie neque. Curabitur iaculis ipsum tempor, tincidunt nibh non, pellentesque massa. Etiam scelerisque facilisis turpis. Nunc interdum iaculis pellentesque. Sed lacus mi, vulputate interdum nisi in, auctor consequat neque. Maecenas ultrices elementum ligula. Aliquam vel nulla sit amet augue consectetur aliquet. Proin eget molestie nunc. Quisque porta sem vestibulum magna condimentum condimentum. Praesent sit amet lobortis tellus. Ut tellus enim, sollicitudin sit amet elit ac, molestie tristique mauris. Duis urna mauris, pellentesque vitae nunc vitae, commodo consequat magna. Donec lobortis, lectus ac aliquam dictum, est dolor maximus ante, sed gravida tellus sem ac dolor. Ut eu interdum metus.</p>
  <p>Nunc lobortis laoreet erat eget maximus. In hac habitasse platea dictumst. Duis fringilla lacus eget placerat laoreet. Duis vulputate lectus eu turpis cursus maximus. Suspendisse nec scelerisque quam. Nulla bibendum facilisis porta. Sed laoreet auctor massa venenatis scelerisque. Pellentesque eget tristique lacus, eu accumsan enim. Praesent non placerat metus. Nulla facilisi. Pellentesque tincidunt tortor magna, vel varius arcu tristique et. Morbi tristique, dolor sit amet sodales ornare, erat nisi rutrum metus, vitae rhoncus purus augue vitae purus. Donec viverra eget libero quis molestie. Fusce quis congue magna, eget elementum erat. Sed sodales pellentesque est volutpat eleifend.</p>
</body>

</html>

＆＃13;

Answer 2

删除Default个浏览器样式，您需要删除padding和margin

html,body {
  padding:0;
  margin:0;
}

Answer 3

如果你在chrome（F12）或firefox中使用开发者工具，你可以看到该主体有一个margin: 8px;所以你需要做的就是将其设置为0px

body{
    margin:0;
}

Answer 4

header { 
    margin:0px; 
    padding:0px;
}

Answer 5

使用重置https://meyerweb.com/eric/tools/css/reset/和规范化https://cdnjs.com/libraries/normalize，以使浏览器看起来相同/以相同的默认值开头。

标记

5 个答案: