CODEWITHSUNDEEP
cssmargin
lolrie
lolrie

Reputation: 111

Why are there margins around my header when I've set width: 100%?

First timer here. Could someone please tell me why there are margins around the header? How can I fix it?

jsfiddle: http://jsfiddle.net/lauriecai/39J2B/3/

header {
width: 100%;
height: 100px;
background-color: #fff;
}

Upvotes: 2

Views: 390

Answers (4)

Liftoff
Liftoff

Reputation: 25392

There are actually two things at work here.

1. Body margins

By default, the body has margins of around 5px(ish). Most of the answers on here have already covered that. You can fix it by setting them to 0;

body
{
    margin: 0;
}

2. <h1> ALSO has margins

Your header is being pushed down by the margins on your <h1> element. Remove the top margins to fix it.

h1
{
    margin-top: 0;
}

Updated JSFiddle

Upvotes: 2

JRulle
JRulle

Reputation: 7568

<style> html, body { margin: 0; padding: 0; } </style>

Upvotes: 0

royhowie
royhowie

Reputation: 11171

When posting to SO, you generally want to put your code into a

fiddle,

since it gives everyone the ability to easily access the code you've already written/attempted. Images are both tedious and difficult to work with and will probably deter people from helping you. I'd try to avoid them when you want to post code.

Nevertheless, the actual answer to your question:

If you want to remove all padding and margins, you should add the following CSS to your index.css file:

html, body {
    padding: 0px;
    margin: 0px;
}

Upvotes: 1

alessandrio
alessandrio

Reputation: 4370

<body>
<header>
<a href="index.html">
<h1>LAURIE</h1>
<h2>DESIGNER</h2>
</a>
</header>
</body>

css

/*general*/

body{
margin: 0;
padding: 0;
}

or

*{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

also position: absolute;

Upvotes: 0

Related Questions