Correct HTML mark-up syntax? (to remove whitespace between inline-block elements) [duplicate]

7
votes

When html code is not 'beautified', it looks like 

<div><img src="img1.jpg"/><img src="img2.jpg"/></div>

And then these pictures rendered as

|=||=| //no gap between

But after beautifier http://ctrlq.org/beautifier/

<div>
    <img src="img1.jpg"/>
    <img src="img2.jpg"/>
 </div>

They are rendered like this

|=| |=| // gap (space) between

So, same code rendered differently. I want to figure how to do correct syntax for html inlined elements (and html at all)?

(inlined could be even 'block' elements), so I don't know, how to write code that could be human readable and rendered correctly (without gaps between inlined elements at least).

Any suggestions? =)

4
htmlcsssyntaxhtml-parsing
This seems like a bug in the beautifier. It shouldn't make changes that can have an effect on rendering. – Barmar
@Barmar: That's impossible to determine; the beautifier has to make guesses sometimes. (For example, if a stylesheet applied white-space: pre to anything, it would make most things unchangeable, and there's no easy way of telling when that would apply.) – Ry-♦
Not to mention ::before and ::after and whitespace... – Ry-♦
@minitech: seems like there a gap =) – el Dude
@EL: Oh, there is - the point is to illustrate that it's impossible to beautify HTML and be sure that no layout will change. (Note the trailing spaces inside each <div> - if an ::after element is added, they matter, but otherwise, it's ignored [note the border].) – Ry-♦

4 Answers

9
votes

There are several options to displaying inline-block elements in a easily read manner, none of which are perfect.

Option 1: Left Floats

Here is a tutorial on Floats in general: http://css.maxdesign.com.au/floatutorial/ It is highly recommended for all front end developers to be well versed in this subject.

Option 2: Nested comments (already posted)

<div>
    <img src="img1.jpg"/><!-- 
 --><img src="img2.jpg"/>
</div>

Option 3 (potentially in the future): text-space-collapse: discard; (previously white-space-collapse: discard;)

The CSS property white-space-collapse is not recommended because of poor browser adoption (see comment below). It appears this property is no longer a part of the text decoration specification. I have also found reference to text-space-collapse as being considered for the future.

Option 4: Don't try

You can't expect to have beautiful code when using display:inline-block. It is my opinion that your use of inline-block and desire of beautiful code are mutually exclusive without use of float:left.

Option 5: Add font-size: 0 to a parent element. Apparently this doesn't work with Safari, so the solution is of similar value to white-space-collapse: discard;.

5
votes

Depending on your browser, it may be rendered as a space. You can try this:

<div>
    <img src="img1.jpg"/><!-- 
 --><img src="img2.jpg"/>
</div>

<!-- is a comment tag that will be ignored by browsers.

1
votes

I know I'm going to be hated for saying this. Buuuuut....

If you want to position your img's precisely next to one another AND have "beautified" code you need to use a table.

Cue screaming

With css you can do whatever you want with 2 img in a div except position them precisely like a table.

This code....

<div>
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <img src="img1.jpg"/>
            </td>
            <td>
                <img src="img2.jpg"/>
            </td>
        </tr>
    </table>
</div>

will get you the result you desire but the question is, can you live with yourself afterwards?

Relevent fiddle http://jsfiddle.net/t4Krs/

0
votes

It's not pretty, but it's prettier than the comment trick in my opinion:

<div>
  <
   img src="img1.jpg"/><
   img src="img2.jpg"
  >
</div>