2017-12-28 11 views
1

Ich habe ein einfaches Nav-Element, das mit meiner Fußzeile auf einer Seite sitzen wird.Unerwartete Polsterung Verhalten - Flexbox

Wenn ich diesem Element einen Padding hinzufüge, wird das Element um den angegebenen Abstand verkleinert.

Normalerweise, wenn Sie Padding zu einem Element hinzufügen schrumpft es nicht das eigentliche Element. Ich verstehe, dass box-sizing: border-box stellt sicher, dass die Polsterung in der Gesamtbreite enthalten ist, aber ich habe die Breite 100% des Elternteils gemacht.

Das gleiche Problem ist nicht mit den Kopf- oder Fußzeilenelementen aufgetreten.

Wirklich sehr verwirrt hier.

Codepen: https://codepen.io/emilychews/pen/opZjEr

/* NAV ABOVE FOOTER */ 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
#footer-nav { 
 
    position: relative; 
 
    width: 100%; 
 
    padding: 0 5%; 
 
    box-sizing: border-box; 
 
} 
 

 
ul#footer-nav-items { 
 
    margin: 0; 
 
    padding: 1rem 1rem 1rem 0; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    background: yellow; 
 
} 
 

 
ul#footer-nav-items li { 
 
    list-style-type: none; 
 
    padding-right: 1.44rem; 
 
}
<nav id="footer-nav"> 
 
    <ul id="footer-nav-items"> 
 
    <li class="footer-menu-item">Home</li> 
 
    <li class="footer-menu-item">Privacy/Terms</li> 
 
    <li class="footer-menu-item">Contact</li> 
 
    </ul> 
 
</nav>

Antwort

3

Das nav-Element ist nicht mit Polsterung schrumpft. Es bleibt bei width: 100%.

Vielleicht beurteilen Sie die Breite des Navigationselements basierend auf der gelben Hintergrundfarbe.

Denken Sie daran, dass der gelbe Hintergrund auf das Element ul und nicht auf das Element nav angewendet wird.