CODEWITHSUNDEEP
htmlheader
SaturnsEye
SaturnsEye

Reputation: 6509

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

This is what it looks like in Dreamweaver and how I want it to look

This is how it turns out in browser view

Upvotes: 1

Views: 3497

Answers (4)

Abandoned Cart
Abandoned Cart

Reputation: 4676

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;
}

Upvotes: 0

Ankit Jain
Ankit Jain

Reputation: 1286

Heading tags takes default margin and padding on web page. Use margin:0 and padding:0 on heading tags.

h1
{
    margin:0px;
    padding:0px;
}

Upvotes: 0

imulsion
imulsion

Reputation: 9040

Add

margin:0;
padding:0;

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

Upvotes: 4

Davor Mlinaric
Davor Mlinaric

Reputation: 2027

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;
}

Upvotes: 2

Related Questions