Blazor 服务器应用程序删除 MainLayout.razor 和 Index.razor 之间的边距

Question

自定义 MainLayout.razor 文件和 Index.razor 文件后，我无法删除两个视图之间的空白。

我尝试在任何地方插入 style="margin:0px" 但没有。 我一直在寻找替代方案，但无法解决，或者更确切地说，我找不到任何其他解决方案可以让我了解它的工作原理。

MainLayout.razor

@inherits LayoutComponentBase

    <style>
        .resLogo {
            width: 100%;
            max-width: 150px;
            height: auto;
        }
    </style>
                <div class="top-row px-4 auth">
                    <LoginDisplay />
                </div>
                <div class="row" style="margin:0px;>
                    <div class="col" />
                    <div class="col-sm-2">
                        <img class="resLogo" src="img/logo.png" />
                    </div>
                    <div class="col-sm-8">
                        <p style="font-size:1vw">text1</p>
                        <p style="font-size:1vw">text2</p>
                        <p style="font-size:3vw">text3</p>
                        <p style="font-size:2vw">text4</p>
                        <p style="font-size:1.5vw">text5</p>
                    </div>
                    <div class="col" />
                </div>
                <div class="content" style="margin:0px">
                    @Body
                </div>
                <div>
                    This is the footer
                </div>

Index.razor

@page "/"

    <div class="row">
        <div class="col" />
        <div class="col-sm-10">
            index slider container
        </div>
        <div class="col" />
    </div>

Answer 1

如果没有复制的例子，真的很难说什么是不受欢迎的边距的原因，但是请尝试Bootstrap spacing classes，例如mt-0 或mb-0。

所以代码可能如下所示：

<div class="content mt-0 mb-0">
    @Body
</div>

和

<div class="row mt-0 mb-0">
    <div class="col" />
    <div class="col-sm-10">
        index slider container
    </div>
    <div class="col" />
</div>

或者如果你想删除所有边距，那么你可以使用m-0 类。此外，如果您想删除填充，请随意使用 Bootstrap 的p-0 类。

更新：

看起来p 有额外的边距值。所以它在 div 之间创建了额外的空间。所以你可以通过新规则覆盖它：

div > p {
    margin: 0;
    padding: 0;
}

An example where there is no line with color burlywood.