solution for extra space in div element

Question

In my application I am using a div element. There is some extra space found below and above the div element.

How can I remove that?

Thanks

Answer 1

There's probably some margin applied to the div through some CSS style.

Answer 2

Assuming that you have access to the html of the page itself, try the margin or padding css styles on the tag. For example

<div style="padding-top:0px;">my div with no padding at top</div>

See http://www.w3schools.com/css/css_margin.asp and http://www.w3schools.com/css/css_padding.asp for more details

P.S. If you are using firefox firebug is a great tool to check / change these values and see what happens to your page

Answer 3

It sounds like there are margins or padding given to the div elements via CSS. Skim your CSS file for something like this:

div {
    margin: [...];
    padding: [...];
}

Just get rid of the margin/padding definition or adjust the value as necessary.

Answer 4

<div style="margin:0;padding:0;border:0;">My div has no padding</div>

If you're going to do this regularly, create a class for it in your CSS file instead.

Answer 5

Each browser has it's own default values for margin and padding on various elements. So unless you explicitly set eg.

div {
margin:0;
padding:0;
}

in your CSS stylesheet, there will be some spacing below and above your div.

What's more annoying is that each different browser will have different default values for padding and margin on divs eg. Firefox might have 10px margin and IE may have 8px margin.

I find it is best to initially reset all these defaults to zero at the top of my stylesheets. eg.

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
}

In fact for this I use the brilliant Blueprint CSS as it has a reset.css file included which does the trick!