html - Thymelaf block loosing style

Question

I have this piece of code:

<div class="col-md-3 col-sm-6 text-center">
<a href="/" class="logo logo_image">
    <span>
        <block >Plats</block>
        <span class="muellerhoff" >Bruts</span>
    </span>
    <img src="http://172.114.143.253:7080/images/logo.png" >
</a>
</div>

and I see this on the browser:

but when I use thymeleaf:

<div class="col-md-3 col-sm-6 text-center">
    <a href="/" class="logo logo_image">
        <th:block th:text="${@environment.getProperty('site.name1')}" />
        <span class="muellerhoff" th:text="${@environment.getProperty('site.name2')}"></span>
        <img th:src="@{/images/logo.png}" th:alt="${@environment.getProperty('site.name')}"  th:title="{@environment.getProperty('site.name')}">
    </a>
</div>

the style is lost:

and when I do view source I see this:

<div class="col-md-3 col-sm-6 text-center">
                            <a href="/" class="logo logo_image">
                                Plats
                                <span class="muellerhoff">Bruts</span>
                                <img th:src="@{/images/logo.png}" th:alt="${@environment.getProperty('site.name')}"  th:title="{@environment.getProperty('site.name')}">
                            </a>
                        </div>

I also tried <block th:text="${@environment.getProperty('site.name1')}" /> with the same result

question from:https://stackoverflow.com/questions/65951077/thymelaf-block-loosing-style

Answer 1

Thymeleaf th:block is not the same as HTML tag <block>. If your first HTML snippet work as intended, enhancing it with Thymeleaf should look like the following...

<div class="col-md-3 col-sm-6 text-center">
<a href="/" class="logo logo_image">
    <span>
        <block th:text="${@environment.getProperty('site.name1')}">Plats</block>
        <span class="muellerhoff" th:text="${@environment.getProperty('site.name2')}">Bruts</span>
    </span>
    <img src="http://172.114.143.253:7080/images/logo.png" th:src="@{/images/logo.png}" th:alt="${@environment.getProperty('site.name')}"  th:title="{@environment.getProperty('site.name')}">
</a>
</div>