How to stop formatting/indentation breaking elements?

Question

Ok so this is a strange one and I'm not sure I can really give an effective code example here. But basically, I have some markup and if I add a space or a tab between anydiv to format it for readability, it will break the html. I haven't saw this before....

So this is what I have, and when you hover over one of the boxes, it will slide up to reveal some text behind it like so.

The problem is that there isn't much spacing and/or indentation in the markup.

  <div class="small-3 spb_icon_box columns">
    <div class="spb-asset-content">
    <div class="sf-icon-box sf-icon-box-animated-alt animated-no-rounded">
    <div class="height-adjust"></div>
    <div class="inner">
    <div class="front" style="background-color:#263238;"><div class="back-title" data-title="Lorem Ipsum" style="color:#ffffff;"></div><div class="front-inner-wrap"><div id="sf-svg-28" class="sf-svg-icon-holder sf-svg-icon-animate business-outline_bulb-63 has-color" data-svg-src="http://xxxx.com/wp-content/themes/XXX/images/svgs/XXXX.svg" data-anim-type="delayed" data-path-timing="ease-in" data-anim-timing="ease-out" style="stroke: rgb(255, 255, 255); opacity: 1;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 48 48"><g transform="translate(0, 0)">
    <path data-color="color-2" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round" d="M2,24L6,24" style="stroke-dasharray: 4, 6; stroke-dashoffset: 0;"></path>
    <path data-color="color-2" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round" d="M8.4,8.4L11.3,11.3" style="stroke-dasharray: 5, 7; stroke-dashoffset: 0;"></path>
    <path data-color="color-2" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round" d="M24,2L24,6" style="stroke-dasharray: 4, 6; stroke-dashoffset: 0;"></path>
    <path data-color="color-2" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round" d="M39.6,8.4L36.7,11.3" style="stroke-dasharray: 5, 7; stroke-dashoffset: 0;"></path>
    <path data-color="color-2" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round" d="M46,24L42,24" style="stroke-dasharray: 4, 6; stroke-dashoffset: 0;"></path>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M36,24c0-6.6-5.4-12-12-12  s-12,5.4-12,12c0,5.2,3.3,9.7,8,11.3V40h8v-4.7C32.7,33.7,36,29.2,36,24z" stroke-linejoin="round" style="stroke-dasharray: 85, 87; stroke-dashoffset: 0;"></path>
    <path data-color="color-2" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round" d="M20,46L28,46" style="stroke-dasharray: 8, 10; stroke-dashoffset: 0;"></path>
    </g></svg></div><div class="sf-icon-box-content-wrap clearfix"><h3 style="color:#ffffff;">Lorem Ipsum</h3></div></div></div><div class="back" style="background-color:#151d21;"><div class="back-inner-wrap"><div class="sf-icon-box-content" style="color:#ffffff;">
    <p>Vestibule convallis pulvinar tellus eget ultricies. Sed sollicitudin, sem vitae elementum euismod, veilt arcu mattis diam, in scelerisque purus.</p>
    </div></div></div></div>
    </div>
    </div>
  </div>

If I try to add any spacing using the spacebar, return or tab key, the elements breaks. Instead of the title and icon being placed in the center as I'd expect, for what ever reason, it drops below.

Any ideas as to what could be causing this?

UPDATE: fiddle

<div class="front" style="background-color:#263238;">SPACE/TAB HERE<div class="back-title" data-title="Lorem Ipsum" style="color:#ffffff;"></div>

If you go on the fiddle, and add the space or a tab where I've added a comment on the above markup, you will see that it will break the code.

Spacing should be done by margins or padding...not spaces, tabs or breaktags — Paulie_D, Jul 20 '16 at 08:55
Let me rephrase that, not spacing. I mean formatting in the markup it's self. I'm not trying to space anything out in terms of style of the boxes but rather the code it's self. If you see the code I posted, you will see that it's somewhat minified. I'm trying to un-minify it. — ProEvilz, Jul 20 '16 at 08:56
That would depend on how you are laying out the elements. some layout methods take HTML whitespace into account. We'd need to see a [mcve] with the CSS. — Paulie_D, Jul 20 '16 at 08:58
The CSS is huge and that markup is the minimal markup for the element. — ProEvilz, Jul 20 '16 at 09:17
And why are people down voting because it's unclear.. it's perfectly clear what the question is asking. — ProEvilz, Jul 20 '16 at 09:18
We only need to **minimal** amount of the CSS. Jus t enough to demonstrate the issue. — Paulie_D, Jul 20 '16 at 09:21
Yep, inline block...that would be it. - Whitespace in the HTML affects inline block elements - http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Paulie_D, Jul 20 '16 at 09:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/117792/discussion-between-ashley-brown-and-paulie-d). — ProEvilz, Jul 20 '16 at 09:25

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

As posted by Paulie_D it is correlating wit the following question.

You could use additional css, which is a "fix" like (first case vs second case):

float: left;

or on the parent element:

font-size: 0;

etc. Those are not the best solutions. The conclusion in the mentioned thread is the following:

...remove the whitespace in the HTML between the inline-block elements.

edited May 23 '17 at 10:28

Community

1
1

answered Jul 20 '16 at 10:01

Hash

4,647
5
21
39

How to stop formatting/indentation breaking elements?

1 Answers1