Difference between Indented HTML and Inlined HTML

Question

I am rewritting a client web page and I have some problems with HTML rendering.

Next code is the old HTML and all "a" and "img" tags are in one line like this (INLINE IMG):

<div id="inside-img">
    <div class="img" style="width:8643px"><a href=""><img src=""/></a><a href=""><img src=""/></a>... ...</div>
</div>

When I rewrite this, with better indentation like this (INDENTED IMG):

<div id="inside-img">
    <div class="img" style="">
        <a href=""><img src=""/></a>
        <a href=""><img src=""/></a>
        ...
   </div>
</div>

The output of HTML breaks as you can see in the image that I have attached.

There are a lot of images and the last image, moves down instead of be at the end of timeline. I do not know why when I indent HTML, HTML style change.

Anything to do with the inline style of fixed pixels in the original version? Is the second one a defined width that's causing the last image to collapse under? — MegaTron, Jun 21 '17 at 11:16
if you only have images, you can resovle it with `font-size: 0;` on `` — Chiller, Jun 21 '17 at 11:17
Top image contains 8 `img`s. Bottom image contains 7 (unless the screenshot cuts one off). Where's your CSS? — J. Titus, Jun 21 '17 at 11:17

score 3 · Accepted Answer · answered Jun 21 '17 at 11:21

It seems a problem related to elements set to display as inline-blocks, which accounts for whitespace. While the OP does not provide any CSS associated to the markup, this should work:

<div id="inside-img">
    <div class="img" style="font-size:0;">
        <a href=""><img src=""/></a>
        <a href=""><img src=""/></a>
        ...
   </div>
</div>

or this (note the extra comments)

<div id="inside-img">
    <div class="img" style="">
        <a href=""><img src=""/></a><!--
        --><a href=""><img src=""/></a><!--
        -->...
   </div>
</div>

For a full explanation see https://css-tricks.com/fighting-the-space-between-inline-block-elements/

It has solved setting your first option. At night I am going to see a full explanation in your link. Thank you a lot. — Iker Ocio Zuazo, Jun 21 '17 at 15:06

score 2 · Answer 2 · answered Jun 21 '17 at 11:19

This happen because of white space between inline items. White space between inline item in HTML gets visible on screen.As image is an inline item then your first code sample is not having any space between HTML tags. while in second sample code their is space between them ( new line) this will appear as a character (i.e. space) in HTML.

Possible solution for this is using Font-size: 0; on the parent div.

Difference between Indented HTML and Inlined HTML

2 Answers2