是什么导致两个元素之间的这个空间，我怎么能摆脱它？

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 for balance box（和/或gamebox）中的'margin'属性更改为较小的数字。如果您仍想要保持上下空格，请指定边距，如下所示：

.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（或任何对象）周围的空间

编辑：我忽略了你把平衡div漂浮在右边。在CSS中我将两个div指定为内联块（因此它们并排）并且游戏盒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;
}

Answer 2

尝试使用box-sizing。请检查这是否有效

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：

*{
  box-sizing: box-border;
}
/* Balance box */
.balance{
    height: 10%;
    margin: 30px auto;
    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;
}

/* Game box */
.gamebox{
    height: auto;
    margin: 30px auto;
    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 3

请尝试vertical-align:top而不是float:right

将.balance <div>向右浮动，你和.gamebox之间会有一个差距，而即 尽量做到最好。

如果相反，这两个元素设置为display: inline-block，.balance可以简单地与top的{​​{1}}对齐，它将整齐地坐在一起密切关注.gamebox。

请参阅下面的示例，.gamebox的孩子<div>如何通过浮动第二个孩子.right来设置其布局，而right的孩子<div>的{​​{1}} 1}}使用.left对齐。

vertical-align

div[class] {
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 2px solid red;
}
div:not([class]) {
  display: inline-block;
  width: 30vw;
  padding: 1em;
  border: 1px solid grey;
}
.right div + div {
  float: right;
}
.left div + div {
  vertical-align: top;
}

Answer 4

在css中使用此代码。

  .balance{
 height: 10%; 
margin-right : 100px; 
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;