There is this HTML:

<div class="footer"> <div class="tools"> <a role="button" class="material-button" href="{{item.url}}" target="_blank"> <i class="icon fa fa-file-text"></i> Запись </a> <button type="button" class="material-button" ng-click="copyPost(item)"> <i class="icon fa fa-clipboard"></i> Копировать </button> <share url="{{item.url}}" title="{{item.source.name}}" description="{{item.text}}"></share> </div> </div>

Share Share HTML Template:

 <div class="share-block"> <a class="material-button share vk" target="_blank" href="{{vk}}"><i class="fa fa-vk"></i></a> <a class="material-button share fb" target="_blank" href="{{fb}}"><i class="fa fa-facebook"></i></a> <a class="material-button share ok" target="_blank" href="{{ok}}"><i class="fa fa-odnoklassniki"></i></a> <a class="material-button share gp" target="_blank" href="{{gp}}"><i class="fa fa-google-plus"></i></a> </div>

In the browser, it is displayed like this: enter image description here

After minifying HTML, it looks like this: enter image description here

As far as I understand, this is due to the fact that gaps have been removed when minifying. I climbed into the generated minified HTML to sort it out. In general, to my surprise, there are spaces between the <a> tags in the share component. There is NO space between the <a> and <button> tags that are in the tools diva.

Explain to me where is the logic, how to correct the situation? After all, in theory, there should be a space, since it is in the share component between the tags <a>.

Grunt, grunt-angular-templates.

    2 answers 2

    Reset default margin for inline-block elements, for example, set the margin-right in CSS: 4px

     .material-button { display: inline-block; margin-right: 4px; }

    Upd. For confidence, you can still reset the margin using the comment

     <a class="material-button"></a><!-- --><a class="material-button"></a>
    • In this case, before and after minification, the pages will look different. - Ilya Bizunov

    In general, the only more or less normal solution, I found the following. Set font-size: 0 for the whole page:

     body { font-size: 0; }

    Further, wherever we use the text, set the desired font size:

     .text { font-size: 16px; }

    In this case, we solve the problem with spaces in the HTML-markup and CSS. Pages look the same before and after assembly.