Removing Spacing from a HTML element

Question

this question involves doctype so I won't be using JFiddle because there the doctype is automatically included

you can copy and paste into a file.html and run it though

I'm using to display some information and I when I use it without using a doctype declaration it works fine (no vertical spacing between the span elements)

<html>

<style>

   span {
      font-family:sans-serif;
      font-size:9px;
      color:#666666;
   }
   #statusPass {
      color:#66CC00;
   }
   #statusFail {
      color:#FF0000;
   }

</style>

<body>

<span>process... </span>
<span id="statusPass">pass<br /></span>
<span>process... </span>
<span id="statusFail">fail<br /></span>

</body>
</html>

However if I add a doctype tag it seems to automatically add vertical spacing between the spans, I'm not sure why but it there a way to remove it?

<!DOCTYPE html> <!-- this guy's the culprit -->
<html>

<style>

   span {
      font-family:sans-serif;
      font-size:9px;
      color:#666666;
   }
   #statusPass {
      color:#66CC00;
   }
   #statusFail {
      color:#FF0000;
   }

</style>

<body>

<span>process... </span>
<span id="statusPass">pass<br /></span>
<span>process... </span>
<span id="statusFail">fail<br /></span>

</body>
</html>

There are a lot of questions like this. [Here you can see the answer](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Danil Gudz, Nov 06 '15 at 13:21

score 1 · Answer 1 · answered Nov 06 '15 at 13:48

It seems to work when I use p instead of span and add extra css

<!DOCTYPE html>
<html>

<style>

   p {
       margin:0; padding:0;
       font-family:sans-serif;
       font-size:9px;
       color:#666666;
   }
   #statusPass {
       color:#66CC00;
   }
   #statusFail {
       color:#FF0000;
   }

</style>

<body>

<p>process...
<span id="statusPass">pass</span>
</p>

<p>process...
<span id="statusFail">fail</span>
</p>

</body>
</html>

score 0 · Answer 2 · answered Nov 06 '15 at 13:17

0

Remove the white space (new line) between the span elements.

Bugs in older browsers (emulated in newer browsers when the Doctype is missing) failed to render some space between elements that should have been rendered.

answered Nov 06 '15 at 13:17

Quentin

914,110
126
1,211
1,335

That doesn't work. Even if you interpret the question to mean horizontal spacing, before the question was clarified, quirks mode vs standards mode wouldn't change it. As vertical spacing, removing the spaces doesn't work because the strut in the line box creates the additional vertical space, regardless of the presence of the white space between the span elements. – Alohci Dec 01 '15 at 17:16

Removing Spacing from a HTML element

2 Answers2