Div 元素创建了不需要的边距 [重复]

Question

我正在尝试为我的网站创建一个标题，我给它一个带有内部 CSS 的 div 元素，只是为了让它变得非常简单。大多数 CSS 工作正常，但它在它周围创建了一个奇怪的边距，即使我从未在 CSS 类中指定边距。我尝试将其设置为 0px，但它什么也没做。

Screenshot. Notice the border around the blue background

.headerstyle {
  background-color: #8AA3FF;
  border: 0px solid #353C41;
  height: 23px;
  font-size: 20px;
  font-family: sans-serif;
}

<div class=headerstyle>
  &nbsp; <a style="background-color:#68658F; color:white; padding: 0px 10px; text-align: center; text-decoration: none; display: inline-block;" href=testy.html>Home</a> &nbsp; <a style="background-color:#68658F; color:white; padding: 0px 10px; text-align: center; text-decoration: none; display: inline-block;"
    href=contents.html>Contents</a> &nbsp; <a style="background-color:#68658F; color:white; padding: 0px 10px; text-align: center; text-decoration: none; display: inline-block;" href=about.html>About/Contact</a>
</div>

基本上我只是希望标题挤在浏览器窗口的两侧，而不是留下空白边距。谢谢！

Answer 1

正如@j08691 所说，这是浏览器为所有页面设置的默认边距。

你需要覆盖它：

body{
  margin: 0;
}

可以找到所有 W3C HTML 规范和供应商默认 CSS 样式表的 GitHub 存储库here

1。 Default Styles for Firefox

2。 Default Styles for Internet Explorer

3。 Default Styles for Chrome / Webkit

4。 Default Styles for Opera

5。 Default Styles for HTML4 (W3C spec)

6。 Default Styles for HTML5 (W3C spec)

示例，根据默认的 W3C HTML4 规范：

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

Answer 2

默认情况下，body 元素有边距。删除它：

body { margin: 0; }

Answer 3

在某些网络浏览器中，body 等某些元素具有默认的CSS。对于您的情况，您的 body 元素具有 margin CSS。你应该把它设为零。

body {
    margin: 0;
}

但我建议您使用CSS Reset CSS 文件。将其添加到页面的顶层，然后用您的CSS 代码重写它。

其实这个方法是针对跨浏览器结果的。