這個問題在這里已經有了答案： 默認的 `<body>` 邊距有多寬？ (3 個回答) 如何去除 div 周圍的白色邊框 2 個答案 15 小時前關閉。
我用html創建了一個標題<div></div>，但是當我測驗它時，標題周圍有一個白色的輪廓。我在<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>uj5u.com熱心網友回復：
它與瀏覽器的默認樣式有關。因此，您可以從 body 元素中洗掉邊距：
body {
margin: 0
}
uj5u.com熱心網友回復：
這與默認瀏覽器樣式有關。基本上，它是由瀏覽器添加到頁面的一組樣式。一個簡單的解決方案是重置邊距、填充和框大小，如下所示：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}但對于更大規模的網站，我建議使用 josh 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;
}相關鏈接：
josh 高級重置樣式
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/477754.html
上一篇：邊距不會通過父級的填充折疊
下一篇：用.data()用d3js畫線