Question

我将直接跳转到代码中以便于解释。我有一个简单的手风琴菜单，可以自动加载和插入另一个html文件中的图像库（带有标题文本），如下所示：

<section>
    <a class="box-link" href="#.html">Link 1</a>
        <div class="image-gallery">
            <img src="1.jpg"> [...]
            <p>Example loaded paragraph of text</p>
        </div>
    <a class="box-link" href="#.html">Link 2</a>
    <a class="box-link" href="#.html">Link 3</a>
    <a class="box-link" href="#.html">Link 4</a>
</section>

这个相关的CSS：

section {
    width: 100%;
    max-width: 60em;
    margin: 0 auto;
}

.box-link {
    display: block;
    box-sizing: border-box;
    padding: 1em;
    width: 100%;
}

在大型浏览器窗口中，部分宽度最大值为60em并且在屏幕中心。每一点内容都被刷新到列的边缘，排列很好。

当浏览器窗口小于60em时，一切都变为100％宽度，而且，正是我想要的 - 除了 p 标签。处于此状态时，我希望 p 标记在左侧和右侧有额外的1em边距或填充，以防止它与页面边缘对接。

将padding: 0 1em;添加到section标记可以完全满足我对 p 标记的要求，但其他所有内容都会获得填充，这是我不想要的 - 在大型浏览器窗口中，宽度仍然限制在60em。一旦窗口大小减小到60em以下，就可以看到填充。

所以，问题是：这种“自动”方式是否只能为 p 标签实现额外的填充/边距，或者我是否必须使用媒体查询来为较小的屏幕应用p { padding: 0 1em; }之类的内容？

谢谢。

Answer 1

我认为媒体查询是唯一且最好的选择 -

@media screen and (max-width:480px) {
    p { padding: 0 1em; }
}

使用较小的浏览器窗口优雅地为某些元素的左右边缘添加填充

1 个答案: