How do I get rid of an element's offset using CSS?

Question

I\'ve got a positioning problem with some elements, upon inspecting it IE8 Developer tools it shows me this:

Answer 1

For me, it was vertical-align: baseline vs vertical-align: top that was causing the top offset.

Try to set vertical-align: top

Answer 2

define margin and padding for the element is facing the problem:

#element_id {margin: 0; padding: 0}  

and see if problem exists. IE renders the page with to more unwanted inheritance. you should stop it from doing so.

Answer 3

I had the same issue on our .NET based website, running on DotNetNuke (DNN) and what solved it for me was basically a simple margin reset of the form tag. .NET based websites are often wrapped in a form and without resetting the margin you can see the strange offset appearing sometimes, mostly when there are some scripts included.

So if you are trying to fix this issue on your site, try enter this into your CSS file:

form {
  margin: 0;
}

Answer 4

Quick fix:

position: relative;
top: -12px;
left: -2px;

this should balance out those offsets, but maybe you should take a look at your whole layout and see how that box interacts with other boxes.

As for terminology, left, right, top and bottom are CSS offset properties. They are used for positioning elements at a specific location (when used with absolute or fixed positioning), or to move them relative to their default location (when used with relative positioning). Margins on the other hand specify gaps between boxes and they sometimes collapse, so they can't be reliably used as offsets.

But note that in your case that offset may not be computed (solely) from CSS offsets.

Answer 5

I had the same problem. The offset appeared after UpdatePanel refresh. The solution was to add an empty tag before the UpdatePanel like this:

<div></div>

...

Answer 6

Just set the outline to none like this

[Identifier] { outline:none; }