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

Solution

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!

Comments

[Bikram Kumar]

Instead of that long list, you can just use " * ".