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代码进行重写。

实际上，此方法用于跨浏览器结果。

Div元素会产生多余的边距

3 个答案: