HTML / CSS无法理解某些内容

Question

我是html / css的初学者，我的问题是为什么使用下一个HTML代码：

第二个徽标的div不是全灰色的，它只有75％，如果我尝试添加css #displayscore则更多：如果我想编辑margin_top的值margin-top，那么一切都将是散。

像这样：

我真的不知道该怎么做，我尝试了一切，并没有找到解决问题的方法。如何将第一个徽标设为全绿色，第二个徽标仅为80％灰色。正如我所说，当我尝试margin_top得分时，我根本无法做到。

CSS ：

HTML ：

Answer 1

（我不知道你是怎么得到'代码太多'的错误 - 代码不多！）

我添加了代码以摆脱默认添加的边距（你也可以在这里摆脱填充;我建议你为徽标添加填充，左右）

*{margin:0;}

我也将你的div对齐到顶部

vertical-align:top;

当我使用在互联网上找到的图像时，我插入代码来设置它们的样式

div img{height:15px; width:auto;}

我显示了您的div inline，但您可以根据自己的目的进行更改（内联块或其他）

* {
  margin: 0;
}

div {
  display: inline;
  vertical-align: top; 
}

#displaymatches2 {
  width: 100%;
  background-color: gray;
  width: 100%;
}

#displayhometeam2 {
  width: 65%;
  background-color: yellow;
  text-align: center;
  height: 70px;
}

#displayhometeam {
  width: 65%;
  height: 70px;
  background-color: yellow;
}

#displayimagehome {
  width: 35%;
  height: 70px;
  background-color: green;
}

#displayscore {
  width: 40%;
  height: 70px;
  background-color: purple;
}

#displayawayteam {
  width: 30%;
  height: 70px;
  background-color: pink;
}

#displayimageaway {
  width: 35%;
  height: 70px;
  background-color: gray;
}

#displayawayteam2 {
  width: 65%;
  height: 70px;
  background-color: orange;
}

div img {
  height: 15px;
  width: auto;
  padding: 1px 5px;    /*try this*/
}

<div id="displaymatches2">
  <div id="displayhometeam">
    <div id="displayhometeam2">Steau
    </div>
    <div id="displayimagehome">
      <img src="https://hdlogo.files.wordpress.com/2011/12/steaua-bucuresti-logo.png">
    </div>
  </div>
  <div id="displayscore">
    0 - 4
  </div>

  <div id="displayawayteam">
    <div id="displayimageaway">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c0/FC_Dinamo_Bucuresti_logo.svg/502px-FC_Dinamo_Bucuresti_logo.svg.png">
    </div>
    <div id="displayawayteam2">
      Dinamo
    </div>
  </div>
</div>

Fiddle