html - 是什么导致了两个元素之间的这个空间，我该如何摆脱它？

Question

这是我正在尝试做的事情的蓝图:

我正试图摆脱这个丑陋的空间，但我不确定它来自哪里。

HTML:

<div class="balance">
        <h3 id="balance"><img id="bitcoin" src=Images/bitcoin.png width="25px" height="25px"> Balance: Loading...</h3>
</div>

<div class="gamebox">
       <!--- Game box markup code --->
</div>

平衡面板的 CSS:

/* Balance box */
.balance{
    height: 10%;
    margin: 20px;
    width: 30%;
    font-family: "smooth";
    background-color: white;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    float: right;
}

主游戏面板的 CSS:

/* Game box */
.gamebox{
    height: auto;
    margin: 20px;
    padding: 20px;
    width: 50%;
    font-family: "smooth";
    background-color: white;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display:inline-block;
}

是什么造成了空间？我希望两个面板之间不要有这么大的差距。

Answer 1

将平衡盒(和/或游戏盒)的 css 中的“边距”属性更改为较小的数字。如果您仍想保留上下空间，请像这样指定边距:

.balance {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px;

   /*other code*/
    height: 10%;
    width: 30%;
    font-family: "smooth";
    background-color: white;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    float: right;
}

宽泛地说，边距是html中div(或任何对象)周围的空间

编辑:我忽略了您将 balance div 向右浮动的情况。在 css 中，我将两个 div 都指定为内联 block (因此它们并排放置)，并将 gamebox div 指定为向左浮动

 /* Balance box */
.balance{
    height: 10%;
    margin: 20px;
    width: 30%;
    font-family: "smooth";
    background-color: white;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: inline-block;
}

.gamebox{
    float: left;
    height: auto;
    margin: 20px;
    padding: 20px;
    width: 50%;
    font-family: "smooth";
    background-color: white;
    color: black;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display:inline-block;
}