解決 Blazor 中因標簽換行導致的行內元素空隙問題

實踐過不同前端框架的朋友應該都知道，對於同一個樣式，在不同框架上的表現都會有不同，時時需要做“適配”，在 Blazor 上也不例外。在做 Ant Design Blazor 時就深有體會，因為我們是同步官方的樣式，他們的樣式只考慮了React 上的實現，除非有人專門提 PR，否則都不會特別考慮其他框架的實現。本文就介紹一個典型問題。

當我們使用 Razor 模板時，特別是使用 if for 等語句塊時，都會導致 HTML 元素或者組件換行。而運行後輸出的 HTML 也會換行，而瀏覽器對於HTML換行會轉換成空格，空格又由於預設或繼承的字體大小，讓元素之間出現空隙。這對於本來就要換行的塊狀元素沒什麼問題，但對於想要在一行顯示的行內元素，就會有一個空隙。下麵是一個例子：

<div class="badge">
    <span>1</span>
    <span>2</span>
    <span>2</span>
</div>

<style>
    .badge {
        background-color: red;
        font-size: 32px;
    }

        .badge span {
            background-color: green;
        }
</style>

結果可以看出，數字之間和數字周圍都有空隙：

而我們看下不換行是怎樣的：

<div class="badge"><span>1</span><span>2</span><span>2</span></div>

<style>
    .badge {
        background-color: red;
        font-size: 32px;
    }

        .badge span {
            background-color: green;
        }
</style>

可以看到數字之間沒有空隙。那麼，怎麼解決呢？

其實這屬於 css 的一個常見問題，解決方法也通用的，就是想辦法使那些從換行轉換的空格的字型大小變為 0，使空隙消失，並恢復子元素的字型大小：

<div class="badge">
    <span>1</span>
    <span>2</span>
    <span>2</span>
</div>

<style>
    .badge {
        background-color: red;
        font-size: 0;
    }

        .badge span {
            background-color: green;
            font-size: 32px;
        }
</style>

結果：