html - 在 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(宽度 + 两个 * 内边距)，比 .image(仅 100%)大。如果您在元素上使用 box-sizing: border-box，填充将包含在可能是您想要的宽度中。这是一个js fiddle 供引用: https://jsfiddle.net/wwrvxc5y/1/