解决 Blazor 中因标签换行导致的行内元素空隙问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决 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>

结果：文章来源地址https://www.toymoban.com/news/detail-631408.html

到了这里，关于解决 Blazor 中因标签换行导致的行内元素空隙问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！