1

I was under the impression that hitting Enter to add a line break in my text editor (for the sole purpose of keeping my code tidy/easy to read), has "no effect" on the rendered output.

Apparently I was mistaken. The example in the snippet below clearly shows that my line breaks are adding unwanted spacing after a <span>.

  • I tried box-sizing:border-box but it has no effect (presumably since there are no borders).
  • Negative margins seem to fix the problem, but that doesn't seem like a reasonable solution everywhere I want to add a line break to keep my code tidy.

Why is this happening? Is there a way to avoid this, or should I just code on one really long line from now on?

span {
  display: inline-block;
  height: 20vh;
  width: 10vw;
  background-color: red;
}

span:nth-child(even) {
  background-color: green;
}
<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><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
halfer
  • 19,824
  • 17
  • 99
  • 186
ashleedawg
  • 20,365
  • 9
  • 72
  • 105
  • setting position `inline-block` on elements takes whitespace into account so returning to a new line in your editor will reflect in the browser, do the `span` elements need to be `inline-block`? – David Alsbright Jun 24 '19 at 21:36
  • to add more complexity you have two spaces: the horizontal one created by whitespace and vertical one created by baseline alignment (added two duplicate) – Temani Afif Jun 24 '19 at 21:45
  • Looking back at this, I think my confusion came down to being that my original understanding of `` vs `
    ` was fundamentally flawed. Going back to the [basics](https://wikipedia.org/wiki/Span_and_div) for a [refresher](https://stackoverflow.com/q/183532/8112776) was helpful. :-)
     – ashleedawg Nov 04 '19 at 10:52

0 Answers0