CODEWITHSUNDEEP
asp.net-mvc-3razor
user1139666
user1139666

Reputation: 1697

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

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 ?

Upvotes: 1

Views: 1529

Answers (3)

teedyay
teedyay

Reputation: 23511

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.

Upvotes: 1

Guy Dubrovski
Guy Dubrovski

Reputation: 1560

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>

Upvotes: -1

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

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;
}

​

Upvotes: 1

Related Questions