Formatierung für "Telefon" funktioniert nicht

Question

Ich entwickle gerade meine erste Chrome-Erweiterung, die HTML/CSS/Javascript verwendet. Ich habe ein Problem und bisher scheint keine der Fragen im Stackoverflow mein Problem zu lösen.

Ich habe ein Layout, das wie ein Telefon aussieht, genau wie ein IPhone. Grundsätzlich funktioniert meine Taste in der homepage-bottom ID div nicht richtig. Ich möchte die homepage-bottom-inside ID div (es ist die Farbe ist schwarz) rund.

Es sieht derzeit so aus.

Bitte erläutern Sie meinen Fehler und beheben Sie den Code.

#homepage-bottom-content { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
    height: 50px; 
 
    padding-top: 10px; 
 
    width: 50px; 
 
    background-color: black; 
 
    border-radius: 100px; 
 
} 
 
#homepage-bottom-content-inside { 
 
    height: 25px; 
 
    width: 25px; 
 
    background-color: black; 
 
    border: #E6E6E6 2px solid; 
 
    border-radius: 7.5px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
}

<div id="homepage-bottom"> 
 
    <div id="homepage-bottom-content"> 
 
    <div id="homepage-bottom-content-inside"></div> 
 
    </div> 
 
</div>

EXTRA

Dies ist, wie die gesamte "Telefon" aussieht.

#homepage { 
 
    margin: auto; 
 
    height: 620px; 
 
    width: 330px; 
 
    background-color: lightblue; 
 
    border-radius: 40px; 
 
    border: black 7px solid; 
 
} 
 
#homepage-content { 
 
    margin: auto; 
 
    height: 470px; 
 
    cursor: cell; 
 
    width: 270px; 
 
    background-color: white; 
 
    border-radius: 7.5px; 
 
    border: 3px black solid; 
 
} 
 
#homepage-bottom-content { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
    height: 50px; 
 
    padding-top: 10px; 
 
    width: 50px; 
 
    background-color: black; 
 
    border-radius: 100px; 
 
} 
 
#homepage-bottom-content-inside { 
 
    height: 25px; 
 
    width: 25px; 
 
    background-color: black; 
 
    border: #E6E6E6 2px solid; 
 
    border-radius: 7.5px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
}

<div id="homepage"> 
 
    <div id="homepage-top"> 
 
    <div id="homepage-top-content"> 
 
     <div style="background-color: black; height: 15px; width: 15px; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; border-radius: 100px;"></div> 
 
     <div style="background-color: black; height: 10px; width: 50px; margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 15px; border-radius: 20px;"></div> 
 
    </div> 
 
    </div> 
 
    <div id="homepage-content"> 
 
    </div> 
 
    <div id="homepage-bottom"> 
 
    <div id="homepage-bottom-content"> 
 
     <div id="homepage-bottom-content-inside"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Die padding-top Teil der Gesamthöhe beträgt, so height:40px + padding-top:10px macht es für homepage-bottom-content.

Beachten Sie, dass die Dicke auch Teil der Gesamthöhe ist.

#homepage-bottom-content { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
    height: 40px; 
 
    padding-top: 10px; 
 
    width: 50px; 
 
    background-color: black; 
 
    border-radius: 100px; 
 
} 
 
#homepage-bottom-content-inside { 
 
    height: 25px; 
 
    width: 25px; 
 
    background-color: black; 
 
    border: #E6E6E6 2px solid; 
 
    border-radius: 7.5px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
}

<div id="homepage-bottom"> 
 
    <div id="homepage-bottom-content"> 
 
    <div id="homepage-bottom-content-inside"></div> 
 
    </div> 
 
</div>

Extra-

Ihr Telefon festgelegt:

#homepage { 
 
    margin: auto; 
 
    height: 620px; 
 
    width: 330px; 
 
    background-color: lightblue; 
 
    border-radius: 40px; 
 
    border: black 7px solid; 
 
} 
 
#homepage-content { 
 
    margin: auto; 
 
    height: 470px; 
 
    cursor: cell; 
 
    width: 270px; 
 
    background-color: white; 
 
    border-radius: 7.5px; 
 
    border: 3px black solid; 
 
} 
 
#homepage-bottom-content { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
    height: 40px; 
 
    padding-top: 10px; 
 
    width: 50px; 
 
    background-color: black; 
 
    border-radius: 100px; 
 
} 
 
#homepage-bottom-content-inside { 
 
    height: 25px; 
 
    width: 25px; 
 
    background-color: black; 
 
    border: #E6E6E6 2px solid; 
 
    border-radius: 7.5px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
}

<div id="homepage"> 
 
    <div id="homepage-top"> 
 
    <div id="homepage-top-content"> 
 
     <div style="background-color: black; height: 15px; width: 15px; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; border-radius: 100px;"></div> 
 
     <div style="background-color: black; height: 10px; width: 50px; margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 15px; border-radius: 20px;"></div> 
 
    </div> 
 
    </div> 
 
    <div id="homepage-content"> 
 
    </div> 
 
    <div id="homepage-bottom"> 
 
    <div id="homepage-bottom-content"> 
 
     <div id="homepage-bottom-content-inside"></div> 
 
    </div> 
 
    </div> 
 
</div>