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（宽度+ 2 *填充），它将大于.image（仅100％）。如果在元素上使用box-sizing: border-box，则填充将包含在宽度中，这可能是您想要的。这里有一个小小的参考： https://jsfiddle.net/wwrvxc5y/1/

填充div在前面的div媒体查询上创建边距

1 个答案: