填充div在上面的div媒體查詢創建保證金

Question

我現在試着用媒體查詢不同的東西。我希望我的標籤能夠跨越設備寬度的100％。儘管如此，我在圖片右側獲得了一個邊距。我認爲這是上述div填充的結果，因爲當我將填充更改爲零時，圖像跨越整個設備。

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

我想上的圖像，但是，從以上的div填充的側的空間。

下面是代碼的樣子在媒體查詢部分：

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%; 
} 

爲什麼填充會導致保證金有什麼想法發生？

Answer 1

從外觀上看，.paragraph實際上是100％+ 20px（width + two * padding），它會比.image（只有100％）大。如果在元素上使用box-sizing: border-box，則填充將包含在可能是您想要的寬度中。這裏有一個js小提琴供參考： https://jsfiddle.net/wwrvxc5y/1/