3

I'm trying to create a header for my website, and I gave it a div element with internal CSS, just to keep it extremely simple. Most of the CSS worked fine, but it created a strange margin around it, even though I never specified a margin in the CSS class. I tried setting it to 0px, but it did nothing.

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>

Basically I'd just like the header to squeeze up against the sides of the browser window, rather than leave an empty margin. Thanks!

j08691
  • 204,283
  • 31
  • 260
  • 272
NotRollo
  • 71
  • 1
  • 1
  • 6

3 Answers3

4

As @j08691 said it's the default margin set by your browser for all pages.

You need to override it:

body{
  margin: 0;
}

A GitHub repository of all W3C HTML spec and vendor default CSS stylesheets can be found 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)

Sample, per the default W3C HTML4 spec:

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 }
}
Pixelomo
  • 6,373
  • 4
  • 47
  • 57
3

By default, the body element has a margin. Remove it with:

body { margin: 0; }
j08691
  • 204,283
  • 31
  • 260
  • 272
0

In some web browsers, some elements like body have a default CSS. For your case, your body element has margin CSS. you should make it zero.

body {
    margin: 0;
}

But I proffer you use CSS Reset CSS file. add it to the top level of your page, the rewrite it with your CSS codes.

Actually, this method is for Cross-Browser result.

AmerllicA
  • 29,059
  • 15
  • 130
  • 154