网页上的白色边框

Question

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

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>

渲染

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

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

Answer 1

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

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

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

<!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>

网页上的白色边框

White border on webpage

html

kotlin-js

jetbrains-compose

compose-web