网页上的白色边框

【问题标题】：White border on webpage网页上的白色边框
【发布时间】：2021-09-26 17:34:56
【问题描述】：

即使使用默认配置，我的网站也会为我的所有组件显示不需要的白色边框：

Main.kt

fun main() {
    renderComposable("root") {
        Div({ style { height(300.px); backgroundColor(blue) } }) { }
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Website</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="MyApp.js"></script>
    </body>
</html>

渲染

你能注意到蓝色背景周围的白色边框吗？

为什么会这样？这个白边怎么去掉？

【问题讨论】：

标签： html kotlin-js jetbrains-compose compose-web

【解决方案1】：

这是由于default margin for the body tag being 8px.

这意味着默认的 body 组件以 8px 的边距呈现，这就是您所看到的“白色边框”。

要删除它，您只需调整 body 标记样式。这可以在您的 index.html 文件中完成，您可以在其中声明您的正文：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Website</title>
    </head>

    <body style="margin: 0">

        <div id="root"></div>
        <script src="MyApp.js"></script>
    </body>
</html>

【讨论】：