Kotlin Compose Web页面组件出现异常白边的原因及解决方法

问题产生原因 #

这是浏览器默认样式导致的：所有主流浏览器的用户代理默认样式表都会给<body>元素预置8px左右的外边距（margin），你的代码没有重置该默认样式，所以root容器外层自带body的外边距，表现为蓝色块四周出现白边。

解决方案 #

提供两种可直接落地的实现方式：

方式1：在HTML文件中添加全局样式重置 #

在index.html的<head>标签内插入样式代码，重置全局默认边距：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Website</title>
        <!-- 新增全局样式重置 -->
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div id="root"></div>
        <script src="MyApp.js"></script>
    </body>
</html>

上述代码用通配符选择器重置了所有元素的默认外边距、内边距，同时修改盒模型计算规则，避免后续开发出现宽高计算异常。如果你不需要全局重置，也可以仅针对body设置：

body {
    margin: 0;
}

方式2：直接在Kotlin代码中修改body样式 #

不需要修改HTML文件，在渲染逻辑前手动修改body的默认边距即可：

import org.w3c.dom.document

fun main() {
    // 重置body默认外边距
    document.body?.style?.margin = "0"
    renderComposable("root") {
        Div({ style { height(300.px); backgroundColor(blue) } }) { }
    }
}

两种方案任选其一，运行后即可消除白边。

内容的提问来源于stack exchange，提问作者LeoColman