0

I wondered if there is any technique that can be used to remove whitespace displaying in the browser without sacrificing readability of HTML.

For example, putting HTML on different lines (easier to read when working with it) creates unwanted whitespace between the divs/spans/li's - very frustrating. The only way I can see around this is to push all the HTML onto one line, which makes reading/editing and maintaining a nightmare.

For example see these fiddles.

Fiddle 1 has readable HTML, but the images are pushed onto a second line due to unwanted whitespace.

Fiddle 2 has HTML all on one line, frustrating to read, but the output is correct.

I'm wondering if there is anyway to get around this or is it just something I have to deal with?

To me, the following code is just not easy to work with. 

<div class="prodGrid">
    <div class="prod"><img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" /></div><div class="prod"><img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" /></div><div class="prod"><img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" /></div></div>
Francesca
  • 26,842
  • 28
  • 90
  • 153

2 Answers2

2

There are some CSS-only solutions to this, but none that I'd recommend. I prefer to keep the markup on separate lines, but use comments to "remove" the whitespace, like this:

<div class="prodGrid">
    <div class="prod">
        <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />  
    </div><!--
    --><div class="prod">
        <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />  
    </div><!--
    --><div class="prod">
        <img src="http://www.sciencebuzz.org/sites/default/files/images/cat_0_0.jpg" alt="text" />  
    </div>
</div>

Ugly as all hell, but currently my preferred method until there's a proper CSS solution. inline-block has too many useful properties to abandon it just because the markup suffers slightly.

Note - watch out for IE7 if you do take this approach. There's a bug in that browser that means comments are interpreted as DOM elements. So, if you're using some slightly more complex selectors you may need to take the approach of just sticking everything on one line.

CherryFlavourPez
  • 7,529
  • 5
  • 45
  • 47
  • Thanks, this works well. It's an odd quirk, I wonder if it will change in the future. – Francesca Apr 15 '13 at 10:48
  • 1
    It's not likely to change (the behaviour is correct according to the spec and does make a kind of sense). But there will be the new `text-space-collapse` property that will let us easily deal with it. – CherryFlavourPez Apr 15 '13 at 11:00
0

Used to vertical-align top on your img tag

as like this 

.prod img{vertical-align:top;}

Demo

----------------

2nd is this

.prodGrid{font-size:0;}
.prod img{vertical-align:top;}

Demo2

Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
  • Your first demo still has everything on one line, so it's not really a solution. Setting the `font-size` to `0` does solve the problem, but you then need to set it again for the child elements (there may well be text needed in future). – CherryFlavourPez Apr 15 '13 at 11:02
  • used to this .prodGrid{font-size:0;} and .prodGrid *{font-size:12px;} – Rohit Azad Malik Apr 15 '13 at 11:07
  • Yep - it works reliably, I just don't like using it personally. In larger projects (and times where you are using `em` for font-sizing) this just adds another layer of complexity. But every solution to this problem is a bit of a hack. – CherryFlavourPez Apr 15 '13 at 11:10
  • Problem is when you want to add text... these divs need to contain text underneath too, so setting to font-size:0; you'd then have to set the font size for any spans/p as well which is a bit clunkier IMO – Francesca Apr 15 '13 at 11:12