Question

目前正在学习编码，正在构建一个简单的石头剪刀布游戏。我已经设置 box-sizing: border-box 假设这会阻止添加填充时框大小的增长。但是，当我添加填充时我的盒子会变大，我不知道为什么？我希望这仅与 content-box 一起使用。有人可以帮忙吗？谢谢你。代码如下：

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

.score-board {
    margin: 20px auto;
    border: 3px solid white;
    border-radius: 4px;
    text-align: center;
    width: 200px;
    color: white;
    font-size: 46px;
    padding: 15px 20px;
    font-family: Asap, sans-serif;
}

.badge {
    background: #e2584D;
    color: white;
    font-size: 14px;
    padding: 2px 10px;
    font-family: Asap, sans-serif;
}

#user-label {
    position: absolute;
    top: 30px;
    left: -25px;
}

#computer-label {
    position: absolute;
    top: 30px;
    right: -30px;
}

<div class="score-board">
    <div id="user-label" class="badge">user</div>
    <div id="computer-label" class="badge">comp</div>
    <span id="user-score">0</span>:<span id="computer-score">0</span>
</div>

Answer 1

这可能是因为你的“记分板”是一个内联元素（一个跨度、标签...），或者它是由另一个 CSS 规则内联的，并且在它里面有元素溢出它。你可以在下面看到一个完整的例子。

要解决此问题，请尝试将 display: block 或 display: inline-block 添加到 score-board css 规则。此外，添加 overflow: hidden 以便如果内容太大而无法容纳，则溢出部分将不可见（或者更好的是，更改您的内容以使其适合记分板）。

编辑：我在示例中更改的其他内容：为了测试，我添加了边框和背景颜色，还添加了背景剪辑，这样您就可以在不改变布局/大小的情况下查看边框和填充实际占用的空间。

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

.score-board {
    margin: 20px auto;
    border: 3px solid orange; /* -> test */
    background-color: blue; /* -> test */
    background-clip: content-box; /* -> test */
    border-radius: 4px;
    text-align: center;
    width: 200px;
    color: white;
    font-size: 46px;
    padding: 15px 20px;
    font-family: Asap, sans-serif;
}

<span class="score-board">Long content here</span>
<div class="score-board">Long content here</div>

CSS：为什么在 box-sizing: border-box 时我的框大小会随着填充而增加？

1 个答案: