SvelteKit 1.0按钮无法填满父容器问题求助

我是HTML/CSS/JS及SvelteKit新手，现在碰到一个问题——组件里的按钮右侧有间隙，但单独的测试HTML文件显示正常。截图显示按钮右侧存在间隙，想知道两者差异的原因。

相关代码 #

Svelte组件代码 #

<h1>{market}</h1>

{#each articleList as item}

    <form action="" method="post">
        
        <p class="{item.checked ? 'item-checked' : ''}">
            {item.quantity} {item.article} {item.place}
        </p>

        {#if item.checked}
            <button>DELETE</button>
        {/if}
        
    </form>
{/each}

全局CSS #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    background: #3A3A3A;
    font-family: 'Montserrat', sans-serif;
    margin: 0 2em;
}

组件CSS #

form {
    border: 1px solid #57FF90;
    border-radius: 4px;
    margin-bottom: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
}

form p {
    color: #FFFFFF;
    font-size: 1.4rem;
    padding: 0 0.5em
}

.item-checked {
    text-decoration: line-through;
}

button {
    height: 50px;
    border: none;
    background-color: #57FF90;
    margin: 0;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

测试HTML文件 #

<!DOCTYPE html>
<html lang="en">
<body>
    
    <div class="wrapper">
        <form action="POST">
            <p>Random Text</p>
            <button>DELETE</button>
        </form>

        <form action="POST">
            <p>Random Text</p>
            <!-- <button>DELETE</button> -->
        </form>
    </div>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            padding: 1em;
        }

        form {
            background-color: red;
            margin-bottom: 1em;
            display: flex;
            justify-content: space-between;
            border-radius: 4px;
        }
        
        button {
            border: none;
            background-color: green;
            cursor: pointer;
            border-radius: 0 4px 4px 0;
        }

    </style>

</body>
</html>

差异原因及解决办法 #

核心差异点 #

1. form宽度设置：Svelte组件里的form强制设置了width: 100%，会占满父容器宽度；而测试HTML里的form未设置宽度，默认自适应内容宽度。当form宽度远大于p+按钮的总宽度时，justify-content: space-between只会让元素分别靠左右对齐，按钮仅适配文字宽度，不会撑满form右侧剩余空间，视觉上就会出现“间隙”。
2. box-sizing属性：组件全局CSS给所有元素加了box-sizing: border-box，让padding/border包含在宽高内；测试HTML没有这个设置，按钮默认的padding会直接增加总宽度，让按钮看起来更宽，刚好贴合form右侧。
3. Svelte样式作用域：Svelte组件CSS默认是作用域样式，会自动给元素添加专属属性，若存在外部样式冲突，可能导致按钮的宽度/对齐样式未完全生效。

解决办法 #

• 给form内的p标签添加flex-grow: 1，让p占满中间空间，按钮自动紧贴右侧：

form p {
    color: #FFFFFF;
    font-size: 1.4rem;
    padding: 0 0.5em;
    flex-grow: 1;
}

• 或者给按钮设置min-width，确保宽度足够贴合form右侧：

button {
    height: 50px;
    border: none;
    background-color: #57FF90;
    margin: 0;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    min-width: 80px;
}

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