如何去掉标题周围的白色轮廓？
如何去掉标题周围的白色轮廓？
提问于 2022-05-18 15:31:44
我用<div></div>在html中创建了一个标题，但是当我测试它时，标题周围有一个白色的轮廓。我在<head></head>中创建了标头。标题图像：标题
我网站的HTML代码：
.header {
padding: 20px;
text-align: left;
background-color: skyblue;
color: white;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}<!DOCTYPE html>
<html>
<title>
NetPlat
</title>
<head>
<div class="header">
<a href="login.php">
<button style="float: right;">Logout</button>
</a>
<h1>Home Page</h1>
</div>
<style>
</style>
</head>
<body>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-05-18 15:44:01
这与默认浏览器样式有关。基本上，它是一组由浏览器添加到页面中的样式。一个简单的解决方案是重置边距、填充和框大小，如下所示：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
但对于一个规模更大的网站，我确实建议使用乔希wcomeau重置代码片段：
/*
1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
3. Allow percentage-based heights in the application
*/
html, body {
height: 100%;
}
/*
Typographic tweaks!
4. Add accessible line-height
5. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
6. Improve media defaults
*/
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/*
7. Remove built-in form typography styles
*/
input, button, textarea, select {
font: inherit;
}
/*
8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/*
9. Create a root stacking context
*/
#root, #__next {
isolation: isolate;
}
相关链接：
Stack Overflow用户
发布于 2022-05-18 15:35:58
它与浏览器的默认样式有关。因此，可以从body元素中删除页边距：
body {
margin: 0
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72292026
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号