Why do headers, <h1> <h2> etc.. create extra space around the text? - html

Question

This is what it looks like in Dreamweaver and how I want it to look
This is how it turns out in browser view

Answer 1

Add
margin:0;
padding:0;
In the CSS. Your browser gives the elements margins/padding by default, and you have to explicitly remove them.

Answer 2

i found good way is to reset CSS for all browsers, so it looks more/less same in all. there are alot of examples so here is one:
html, body, blockquote, code, h1, h2, h3, h4, h5, h6, p, pre {
margin:0;
padding:0
}
button, fieldset, form, input, legend, textarea, select {
margin:0;
padding:0
}
fieldset {
border:0
}
a, a * {
cursor:pointer
}
div {
margin:0;
padding:0;
background-color:transparent;
text-align:left
}
hr, img {
border:0
}
applet, iframe, object {
border:0;
margin:0;
padding:0
}
button, input[type=button], input[type=image], input[type=reset], input[type=submit], label {
cursor:pointer;
}
ul, li {
list-style:none;
margin:0;
padding:0;
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}

Answer 3

Heading tags takes default margin and padding on web page.
Use margin:0 and padding:0 on heading tags.
h1
{
margin:0px;
padding:0px;
}

Answer 4

I had a similar issue with attempting to include a heading inside another element with a limited width. It seems that when you limit the width of the element, it adds the default newline as a whitespace equivalent before the heading content.
Setting the margin and padding did not have any impact on the text placement, but preventing whitespace from wrapping a newline resolved the issue.
h1 {
white-space: nowrap;
}