Razor engine replaces linebreaks in code with spaces?

Question

In my application, if I have a nicely indented piece of markup like this:

    <div>
        <label>FOO</label>
        <span>BAR</span>
    </div>

It renders as FOO BAR. Whilst this:

    <div>
        <label>FOO</label><span>BAR</span>
    </div>

renders as FOOBAR

I don't want the space, but I do want to keep the indentation in the cshtml file.

score 2 · Accepted Answer · answered Oct 13 '15 at 13:01

2

This isn't Razor doing it, it's just how HTML rendering works. Look at the raw HTML in your browser:

<div>
  <label>FOO</label>
  <span>BAR</span>
</div>

<div>
  <label>FOO</label><span>BAR</span>
</div>

One way to fix this is to float both the label and span to the left:

div label {
  float: left;
}

div span {
  float: left;
}

<div>
  <label>FOO</label>
  <span>BAR</span>
</div>

answered Oct 13 '15 at 13:01

DavidG

Ahh, so this is a quirk of inline-block elements? I also found a useful page that gives the float solution and some others: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ – Kev Oct 13 '15 at 13:11

1 Answers1