0

目前正在学习编码，正在构建一个简单的石头剪刀布游戏。我已经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>
4

1 回答 1

0

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

要解决此问题，请尝试将display: blockor添加display: inline-block到score-boardcss 规则。另外，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>

于 2020-12-20T13:20:29.713 回答