Padding auf div creating margin auf vorhergehende div media query

Question

Ich probiere jetzt verschiedene Dinge mit Medienabfragen aus. Ich möchte, dass meine Tags 100% der Breite des Geräts umfassen. Ich bekomme jedoch einen Rand auf der rechten Seite meines Bildes. Ich denke, es ist ein Ergebnis des Auffüllens auf dem obigen Div, denn wenn ich das Padding auf Null ändere, überspannt das Bild die gesamte Breite des Geräts.

This is what it looks like -with padding on the above div- and extra space on the side of the image

This is what the looks like -with no padding on the above div- and no space on the side of the image

würde ich auf dem oben div keinen Platz auf der Seite des Bildes, sondern padding mag. Hier

ist, was der Code wie in den Medien Abfrage Abschnitt aussieht:

HTML:

<div class="paragraph"> 
    <p>Vaporwave is a genre of music/ art movement that originated on internet forums such as tumblr and reddit in early 2010. Because it was born online, it has no real origins and is considered the first genre of music to be completely globalized. The genre began as an aesthetic obsessed with 80's and 90's subculture. It was inspired by and contrived using glitch art, early digital graphic design, roman busts, tropical landscapes, japenese culture, and nostalgic television ads.</p> 
</div> 

<div class="image"> 
    <img src="images/skull.jpg" alt="vaporwave image of a skull"> 
    <p>Check out some more <strong>vaporwave art</strong> <a href="vaporart.html">>hurrr<</a></p> 
</div>  

CSS:

.paragraph { 
    color: white; 
    position: relative; 
    text-align: justify; 
    width: 100%; 
    margin: 0 auto; 
    border-radius: 0px; 
    padding: 10px; 
    font-size: .75em; 
    line-height: 1.5em; 
    background: rgba(215,189,234,0.75); 
} 
.image { 
    position: relative; 
    margin: 0 auto; 
    height: auto; 
    max-width: 100%; 
} 

Irgendwelche Gedanken darüber, warum padding verursachen würde einen Spielraum auftreten?

Answer 1

von den Blicken von ihm, ist die .paragraph tatsächlich 100% + 20px (Breite + zwei * padding), die größer ist als die .image wäre (nur 100%). Wenn Sie box-sizing: border-box für Ihre Elemente verwenden, wird das Padding in die Breite eingeschlossen, was wahrscheinlich das ist, was Sie wollen. Hier ist eine JS Geige als Referenz: https://jsfiddle.net/wwrvxc5y/1/