Those mysterious offsets and margins on websites

2015-12-01 | #css, #solution, #webdev

Every webdev stumbles over these once in a while: sometimes there are just empty areas and offset on a website, no CSS or element seems to be responsible for. At least none that you are able to find.

Here are 3 tactics for dealing with those:

1. Especially helpful for horizontal offsets forcing horizontal scrollbars where none should be:


* {

outline: 1px solid red;


to visually find that sneaky little rascal of an element that doesn't obey the order of things.

2. If you are dealing with elements of fixed height nested in each other being statically positioned or floating, a margin of a sub element may offset siblings of a parent element as well. So don't just check the elements the offset is between, but also their children for overlapping margins.

3. The most evil case of an unexplainable offset, which is neither produced by an element nor a margin of one, is the small offset that happens, when we have inline-blocks with widths of 100%. This is evil, because as the element is therefore part of a text line, resulting in a forced blank between two elements. Now image two inline-blocks of 100% width being siblings. What happens? Well, after the first element there is an empty text node you can't see before the next element follows. Since both elements are a full line wide, this empty text node forces an empty line between those elements. One that cannot be associated with any visible element or styling. So don't do this and better use floating for these cases.


4. On IE11 it may also be possible that an element hangs out of the document layout-wise while visually being completely in bounds. This happens when you position the element hanging out and translating it back with a transform. In that case the IE11 calculates with the original position, but displays the right position. This problem cannot be detected via outlines or dev tools since the final state is correctly inside the layout. Using overflow:hidden on the element's container or the body itself solves the problem.