ASP .NET MVC 3 + Razor View + Spaces Between Elements

Question

Consider the following Razor view - Let's call it VIEW-1 :

<h2>Index</h2>

@if (true)
{
    <img src="/Content/images/black_square.png" alt="Black Square" />
}

<img src="/Content/images/black_square.png" alt="Black Square" />

When I load the VIEW-1 into Internet Explorer 8 or Mozilla Firefox 9.0.1 the two "black square" images are separated by a space.
But I do not want the two images separated.

Now consider the following Razor view - Let's call it VIEW-2 :

<h2>Index</h2>

<img src="/Content/images/black_square.png" alt="Black Square" /><img src="/Content/images/black_square.png" alt="Black Square" />

When I load the VIEW-1 in Internet Explorer 8 or Mozilla Firefox 9.0.1 the two "black square" images are not separated by a space.

VIEW-1 and VIEW-2 are example views.
The "separated images" fact is a little problem in one of my ASP .NET MVC 3 project.
I can not write all my image elements on one line because some of them depend on condition statements and loop statements.

Is there a way to get image elements not separated by a space even if they are not written on the same line ?

Here's the same question on Stackoverflow, with an accepted answer: http://stackoverflow.com/questions/2628050/ignore-whitespace-in-html — Pbirkoff, Feb 17 '12 at 08:34

score 1 · Answer 1 · answered Apr 02 '13 at 13:07

Surprisingly, Razor lets you do this:

<h2>Index</h2>

@if (true)
{
    <img src="/Content/images/black_square.png" alt="Black Square" />}<img src="/Content/images/black_square.png" alt="Black Square" />

... though whenever I do, I add an apologetic comment nearby explaining why I've done it.

Darin Dimitrov · Answer 2 · 2012-02-17T08:49:02.163

1

You could try using CSS:

<div class="pictures">
    @if (true)
    {
        <img src="/Content/images/black_square.png" alt="Black Square" />
    }
    <img src="/Content/images/black_square.png" alt="Black Square" />
</div>

and then:

.pictures img {
    float: left;
}

edited Feb 17 '12 at 08:49

answered Feb 17 '12 at 08:30

Darin Dimitrov

1,023,142
271
3,287
2,928

+1. Use CSS to fine tune your image placement. Much easier than messing with the code. – Graham Apr 02 '13 at 13:15

score -1 · Answer 3 · answered Feb 17 '12 at 08:57

-1

You can solve this by inserting the images into a 1 row and 1 cell table:

<table>
@if (true)
{
    <img src="/Content/images/black_square.png" alt="Black Square" />
}

<img src="/Content/images/black_square.png" alt="Black Square" />
</table>

answered Feb 17 '12 at 08:57

Guy Dubrovski

1,542
1
20
25

You forgot `tr` and `td`. There will still be a space though. – jgauffin Feb 17 '12 at 08:59
are for representing tables. For alignment, there is CSS. – Boris Yankov Feb 17 '12 at 09:00

ASP .NET MVC 3 + Razor View + Spaces Between Elements

3 Answers3