<分区>
html - 标签周围有白色边框
我正在尝试创建某种简单的登录页面，但问题是我的图像周围有白色边框。
这就是它的样子
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>最佳答案
设置你的 body margin: 0;填充:0;
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; }<!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>关于html - 标签周围有白色边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45936067/