Setting Background der einzelnen Buchstaben (wie BBC)

Question

BBC Logo: http://www.bbc.com/ (Dies ist die BBC-Seite, die von dem einen aktualisiert da gewesen ist ich bin versucht, neu zu erstellen, subtile Unterschiede)

Mein Ziel ist es, den Hintergrund zu setzen der einzelnen BBC-Briefe. Ich überarbeite die Seite für einen Kurs, den ich mit Udemy mache. Ich habe keine Probleme, den Hintergrund tatsächlich auf weiß zu setzen, sondern tatsächlich die Breite und Höhe des Hintergrunds einzustellen.

Immer wenn ich die Breite/Höhe in der Hintergrundkurzschrift-Eigenschaft angeben, gibt es keinen Effekt.

Tut mir leid, wenn ich hier etwas verlasse, erster echter Post.

Mein aktueller Aufwand (Probe):

HTML:

 <div id="logo"> 
     <div class="letter> 
     <h1>B</h1> 
     </div> 
     <div class="letter> 
     <h1>B</h1> 
     </div> 
     <div class="letter> 
     <h1>C</h1> 
     </div> 
    </div> 

CSS:

#logo { 
    display: inline-block; 
} 

.letter { 
    display: inline-block; 
    color: #7A0000; (Set text to color of page background) 
    background-color: #fff; (Want to create white box around each letter) 
    background-size: 25px 25px; 
} 

Answer 1

Hintergrund-Größe ist die Größe von Hintergrundbildern zu setzen, nicht Größe von Hintergrund- Farbe. Für die eingestellte Breite und Höhe legen Sie eventuell die div diese Größen fest.

.letter 
{height:25px; 
width:25px; 
} 

Answer 2

Stellen Sie sicher, dass Sie die Schriftgröße auf weniger als 25px für die h1 gesetzt, wenn Sie die Höhe .letter auf 25px festlegen möchten. Sie sollten auch die oberen/unteren Ränder des h1-Tags entfernen, andernfalls wird es aus der Box kommen.

.letter h1{ 
    font-size:20px; 
    margin:0px; 
} 

Hier ist ein demo