How to avoid spaces in for loops?

Question

I want to display a number of divs as inline-block. If I do this:

<div class="container">
    <div class="cell">xx</div>
    <div class="cell">xx</div>
    <div class="cell">xx</div>
</div>

I unfortunately get spaces in between the divs, whereas I want them to butt up. so one of the solutions is to do this:

<div class="container">
    <div class="cell">xx</div><div 
      class="cell">xx</div><div 
      class="cell">xx</div>
</div>

another solution is this:

<div class="container">
    <div class="cell">xx</div><!--
    --><div class="cell">xx</div><!--
    --><div class="cell">xx</div>
</div>

both of which are terrible. Now my question: I have a c# foreach loop, where I attempted the last solution (because the first solution would be messy):

<div class="container">
    <!--
    @foreach (string page in pages)
    {
        --><div class="cell">
            @Html.Action(page)
        </div><!--
    }
    -->
</div>

...but of course, it won't compile (I get a parser error). what's a clean way to do this?

I wonder if any of this helps: http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements — Andrew Savinykh, Feb 27 '15 at 07:50
Do you mean visible spaces on the webpage? Or spaces that are visible only inside of the code? — Memet Olsen, Feb 27 '15 at 07:51
and other thing if you avoiding from loop then you use indexing but it's make code more complex. — Shahzad Khan, Feb 27 '15 at 07:56
@MemetOlsen, the problem is that whitespace in the code lands on the page and gets handled like whitespace i.e. it separates the divs so they don't butt up against each other. so I need to eliminate the whitespace — ekkis, Feb 27 '15 at 20:04
@zespri, thank you, it's the perfect document for this problem. unfortunately I would have liked to use the font-size approach but it means having to know the original size. apparently font-size: default doesn't yet work... the other approaches all present problems — ekkis, Feb 27 '15 at 20:09

score 1 · Accepted Answer · answered Feb 27 '15 at 07:51

1

Try using @: as shown :-

<div class="container">
    <!--
    @foreach (string page in pages)
    {
       @: --><div class="cell">
               @Html.Action(page)
       @:    </div><!--
    }
    -->
</div>

answered Feb 27 '15 at 07:51

Kartikeya Khosla

18,743
8
43
69

score 0 · Answer 2 · answered Feb 27 '15 at 08:35

0

I'm not entirely sure I understand what you want but to make them "butt up" then float:left would do the trick assuming by "spaces" you mean vertical stacking:

<div class="cell" style="float:left;">
      @Html.Action(page)
</div>

answered Feb 27 '15 at 08:35

rism

11,932
16
76
116

thanks for the suggestion but I can't use floaters. they don't behave the same way as inline-block – ekkis Feb 27 '15 at 20:01
ok so what about a custom child action that simply builds the string sans spaces and returns. i.e. move your for loop builder out of the view and into controller. – rism Feb 28 '15 at 07:48
yes, that would be viable but now I have to think about making something generic enough that it can build [div], [ol], [ul] and other kinds of things, accepts arguments for the tags, etc. and I just hate to do that kind of thing when I should be able to do it in the view more properly – ekkis Mar 02 '15 at 03:20

How to avoid spaces in for loops?

2 Answers2