HTML/CSS etwas nicht verstehen kann

Question

ich bin Anfänger mit HTML/CSS, meine Frage ist, warum Sie mit dem nächsten HTML-Code:

Die div für das zweite Logo nicht vollständig grau ist und es ist nur 75% und mehr als das, wenn ich versuche, css #displayscore hinzuzufügen: Wenn ich den Wert margin-top von margin_top bearbeiten will, wird alles verstreut.

So:

ich nicht wirklich wissen, was zu tun habe ich versucht, alles und keine Lösung für mein Problem gefunden. Wie es möglich ist, dass das erste Logo voll grün ist und zweitens nur 80% grau ist. Und wie gesagt, wenn ich versuche, die Punktzahl zu erhöhen, kann ich das einfach nicht.

CSS:

HTML:

Answer 1

(ich weiß nicht, wie man einen bekam 'zu viel Code' Fehler - gibt es nicht, dass viel Code!)

Ich habe Code hinzugefügt, um den standardmäßig hinzugefügten Rand zu entfernen (Sie könnten hier auch die Polsterung loswerden; Ich schlage vor, Sie Polsterung für das Logo hinzufügen, links und rechts)

*{margin:0;} 

ich auch Ihre divs ausgerichtet

vertical-align:top; 

nach oben Als ich Bilder im Internet zu finden verwendet i Code sie stylen

eingefügt

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

I angezeigt Ihre divs inline aber Sie können dies Ihre Zwecke anpassen ändern (zu inline-block oder was auch immer)

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