1

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

This is how it turns out in browser view

SaturnsEye
  • 6,297
  • 10
  • 46
  • 62

4 Answers4

4

Add

margin:0;
padding:0;

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

imulsion
  • 8,820
  • 20
  • 54
  • 84
  • Brilliant! that's been an issue I've had for a while and it was such a simple fix haha – SaturnsEye Aug 07 '13 at 08:11
  • @Adsy no problem, I've had it myself ;) I have no idea why it happens by default, but it is a fairly easy fix. Please consider accepting my answer when it lets you – imulsion Aug 07 '13 at 08:13
  • Don't worry mate, I will do – SaturnsEye Aug 07 '13 at 08:14
  • 2
    @imulsion `HTML gives the elements margins/padding by default` Actually browsers do. web browsers apply some default CSS declaration to HTML elements while rendering the page. Use CSS Reset (take a look at Eric Mayer's CSS Reset) to reset the browser default styles. – Hashem Qolami Aug 07 '13 at 08:18
  • @HashemQolami sorry, got a bit distracted. will edit, thank you :) – imulsion Aug 07 '13 at 08:25
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;
}
Davor Mlinaric
  • 1,989
  • 1
  • 19
  • 26
0

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

h1
{
    margin:0px;
    padding:0px;
}
Ankit Jain
  • 1,226
  • 1
  • 10
  • 17
0

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;
}
Abandoned Cart
  • 4,512
  • 1
  • 34
  • 41