Search code examples
htmldoctype

HTML empty button has spacing on top & bottom with !DOCTYPE, but no space without !DOCTYPE

I've just runned into a special case where an empty button with no with/height/border, renders some spacing on top & bottom of it, if !DOCTYPE is specified.

This example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div>asda</div>
<button style="padding: 0;margin: 0;height: 0;width: 0;border: 0;"></button>
<div>asda</div>

</body>
</html>

will visually produce this output:

enter image description here

If I remove <!DOCTYPE html> then no spacing will be there. Of course, doctype needs to be kept.

The question is: how can I remove the spacing while having doctype?

Solution

  • A button element is inline. Change it to display:block; and your properties will do what you want, though I think padding:0; is all you need.