时间戳

首页 > 解决方案 > Div 元素创建了不需要的边距

html - Div 元素创建了不需要的边距

问题描述

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

截屏。注意蓝色背景周围的边框

.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>

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

标签： htmlcss

解决方案

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

您需要覆盖它：

body{
  margin: 0;
}

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

1. Firefox 的默认样式

2. Internet Explorer 的默认样式

3. Chrome / Webkit 的默认样式

4. Opera 的默认样式

5. HTML4 的默认样式（W3C 规范）

6. HTML5 的默认样式（W3C 规范）

示例，根据默认的 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 }
}

推荐阅读