CODEWITHSUNDEEP
htmlcssdoctypespacing
TheLovelySausage
TheLovelySausage

Reputation: 4094

Removing Spacing from a <span> HTML element

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>

Upvotes: 0

Views: 102

Answers (2)

TheLovelySausage
TheLovelySausage

Reputation: 4094

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>

Upvotes: 1

Quentin
Quentin

Reputation: 943548

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.

Upvotes: 0

Related Questions