Piyush Soni Piyush Soni - 8 months ago 45
HTML Question

Extra whitespace between HTML elements in Chrome

UPDATE [4th May, 2015] : It seems the latest versions of Chrome (42.*) have fixed it.

It looks like an embarrassingly simple problem, but I don't know the solution to it. One of the smallest samples which reproduces this is the following HTML code:

<html><body><input type="button" value="button1"/><input type="text"><input type="button" value="button2"/></body></html>

Please note that there is no newline or a whitespace character used anywhere in the above (except to separate the attributes)

In Firefox, it looks like this:

enter image description here

But like this in Chrome:

enter image description here

Notice the extra whitespace Chrome decides to add by itself. I've tried everything I could, but haven't been able to remove this as I need no space between these elements (or may be a minimalistic value just like FF has).

Any help on how can we do that?

Thanks ...

Answer Source

One option would be to reset the styles in your CSS.

You can add this to your default style sheet.

* {
padding: 0;
margin: 0;

If you need a little more information on resets there is a good run down here : http://perishablepress.com/a-killer-collection-of-global-css-reset-styles/