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，但你可以改變這種以滿足您的需要（以inline-block的或其他）

* { 
 
    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