如何停止格式化/缩进元素？

Question

好的，这是一个奇怪的，我不确定我能在这里给出一个有效的代码示例。但基本上，我有一些标记，如果我在任何div之间添加一个空格或制表符来格式化它以便于阅读，它将破坏html。我以前没见过......

所以这就是我所拥有的，当你将鼠标悬停在其中一个方框上时，它会向上滑动以显示背后的一些文字。

问题是标记中没有多少间距和/或缩进。

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

如果我尝试使用空格键，返回或制表键添加任何间距，则元素会中断。而不是像我期望的那样将标题和图标放在中心，不管出于何种原因，它都落在了下面。

关于可能导致这种情况的任何想法？

更新：fiddle

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

如果你继续使用小提琴，并添加空格或标签，我已经在上面的标记上添加了注释，你会发现它会破坏代码。

Answer 1

由 Paulie_D发布，与以下question相关联。

你可以使用额外的css，这是一个“修复”，如（first case vs second case）：

float: left;

或在父元素上：

font-size: 0;

等。那些不是最好的解决方案。上述主题中的结论如下：

  

...删除内联块元素之间HTML中的空格。