CODEWITHSUNDEEP
html
TheGenie OfTruth
TheGenie OfTruth

Reputation: 628

Spacing that changes by line breaks

So I have some code in HTML that changes by whitespace. My CSS:

span{height:200px;width:200px;border-width:1px;border-color:black;border-style:solid;display:inline-block}

My HTML:

Before:

<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>

After:

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

The second is much easier to read, but the display changes and the display I desire is the first ones display, but editing is much easier with the second. Any ideas?

Upvotes: 0

Views: 23

Answers (2)

Aurel B&#237;l&#253;
Aurel B&#237;l&#253;

Reputation: 7983

Spans are display: inline-block by default, which unfortunately means they do get affected by whitespace. One solution is to just not use whitespace between them, which is easier done especially if your HTML is produced by a preprocessor like PHP … Another way is this:

<span></span><!--
--><span></span><!--
--><span></span><!--
--><span></span>

etc. Even though it's still somewhat ugly, you get no whitespace between the spans, while still having them on separate lines.

And yet another way would be to change the CSS for the spans, making them display: block and float: left, for example, but that might not work in your case.

Upvotes: 1

Patrick Weaver
Patrick Weaver

Reputation: 66

This HTML isn't different, you are probably editing in a modified HTML editor which takes linebreaks into account. If so, there isn't anyway to get the first output from the second HTML.

Upvotes: 0

Related Questions