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

Question

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? =)

This seems like a bug in the beautifier. It shouldn't make changes that can have an effect on rendering. — Barmar, Jan 31 '13 at 16:55
@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-, Jan 31 '13 at 16:58
Not to mention [`::before` and `::after` and whitespace](http://jsfiddle.net/minitech/4TZV3/)... — Ry-, Jan 31 '13 at 17:04
@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 `
` - if an `::after` element is added, they matter, but otherwise, it's ignored [note the border].) — Ry-, Jan 31 '13 at 17:24

score 9 · Accepted Answer · edited Dec 03 '13 at 04:02

9

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

edited Dec 03 '13 at 04:02

Jacob Wang

4,411
5
29
43

answered Jan 31 '13 at 16:15

ktamlyn

4,519
2
30
41

1

div's style="white-space-collapse:discard;" (tried preserve/collapse/preserve-breaks/discard) had no effect (in opera 12) – el Dude Jan 31 '13 at 16:30
Thanks, this is partially why its not recommended to use that option. Option 4 and Option 1 are my personal choices. – ktamlyn Jan 31 '13 at 16:37
I'm curious is there a way to display 'beautified source html code' that after it copied to clipboard it is 'not beautified'? But I think that is particular question fo another subject. – el Dude Jan 31 '13 at 16:55
1

Yeah, [it was gone once](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements#comment16711500_5078350). (Is it back?) – Ry- Jan 31 '13 at 16:57
I've had this same thought (out of personal desperation). One day hopefully an IDE will provide this kind of editing, but as far as I know, it doesn't currently exist. – ktamlyn Jan 31 '13 at 16:57
1

@ktamlyn: Ok. I'll try to make a history =) – el Dude Jan 31 '13 at 17:03
Does an implementation exist for either `white-space-collapse`, or `text-space-collapse`? Where are they being proposed? This information should be in your answer. – Šime Vidas Jan 31 '13 at 21:32
@Sime Vidas, I don't know more than I have stated. Both properties appear to be absent in current specification documents I am aware of. CSS Text Decoration Module Level 3 (http://www.w3.org/TR/css-text-decor-3/) and CSS Text Module Level 3 (http://dev.w3.org/csswg/css3-text/). This information comes from your question linked to above by minitech. – ktamlyn Jan 31 '13 at 22:19
2

@ktamlyn `white-space-collapse` has been dropped, and it's not implemented anywhere, so there's no reason to mention it. `text-space-collapse` is proposed in a [preliminary draft of Text Level 4](http://dev.w3.org/csswg/css4-text/#white-space-collapsing) (not published as TR yet). That draft itself is not ready for implementations. Therefore, I wouldn't list these properties as an option, as they aren't, but have a note at the bottom with info about this potentially upcoming property. – Šime Vidas Jan 31 '13 at 23:05
@ŠimeVidas I agree it would have been better to write it out your way but I came to learn of these facts after my original post, so I can't change the list's order now. But I edited the answer considering your input. – ktamlyn Jan 31 '13 at 23:11
`font-size: 0;` plus `line-height: 0;` to a parent element DOES WORK for Safari 7. Of course, you have to reset the font size and line height for child elements. – Rockallite Jun 24 '14 at 07:53

score 5 · Answer 2 · answered Jan 31 '13 at 16:09

5

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.

answered Jan 31 '13 at 16:09

Kermit

33,827
13
85
121

score 1 · Answer 3 · answered Jan 31 '13 at 23:26

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/

score 1 · Answer 4 · answered Jan 14 '14 at 08:58

1

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>

answered Jan 14 '14 at 08:58

ohaal

5,208
2
34
53

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

4 Answers4

Linked