孩子忽略父母填充答案

【问题标题】：Child ignore parents padding孩子忽略父母填充
【发布时间】：2016-07-27 17:58:21
【问题描述】：

我有一个带有图像的投资组合项目，它位于具有左右填充的部分中。问题是我需要图像位于边缘并忽略部分填充。我尝试添加负边距和一些我在 stackoverflow 上发现的带有填充的技巧，但它没有用，它只是用更多的填充/边距使图像居中。

HTML：

<section id="portfolio">

        <!-- Section title -->
        <h2 class="section-title">Portfolio</h2>
        <!-- Section description -->
        <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <!-- Grid layout -->
        <ul class="portfolio-grid">
            <!-- Item -->
            <li class="portfolio-grid-item">
                <!-- Item link -->
                <a href="#" class="portfolio-grid-item-link">
                    <!-- Item image -->
                    <img src="http://placekitten.com/400/400" alt="Image">
                    <!-- Item overlay -->
                    <span class="portfolio-grid-item-overlay"></span>
                    <!-- Item name -->
                    <span class="portfolio-grid-item-name">Item name</span>
                </a>
            </li>
        </ul>
        </section>

JSFiddle

【问题讨论】：

尝试设置图片位置：绝对；顶部：0；
所以我会得到很多堆叠在一起的图像？
如果你想忽略部分填充然后把它设置为'0'
我需要在除图像网格之外的其余部分进行填充。
它有效，谢谢，但为什么是 30px？你可以把你的答案写出来，如果你愿意，我可以勾选它。

标签： html css sass

【解决方案1】：

默认情况下，<body> 在所有浏览器上都有边距。所以你需要做的就是把它们剃掉：

body{
  margin-left:0px;
  margin-right:0px;
}

如果您想在文本上保留一点填充，请写入您想要填充的特定元素。不要写信给 <section> ，因为它会为你里面的所有元素添加填充！

小提琴：https://jsfiddle.net/9mg03wa5/2/

【讨论】：

我知道我来晚了，但我尝试在实际项目中对其进行测试，并且投资组合网格类刚好超过它下面的内容。
@Leon Laci 介意您是否将意外结果复制到小提琴中？
jsfiddle.net/9mg03wa5 如您所见，段落元素只是在投资组合网格下方唱歌，因为它是绝对元素。
@Leon Laci 是的，这就是问题所在。删除 position:absolute from him 以解决该问题。写在 CSS body { padding-left: 0px; padding-right: 0px; }。此外，如果您想在文本上保留一点填充，请写入您想要填充的特定元素。不要写到
，因为它会为你里面的所有内容添加填充。
你能不能把答案改一下，这样其他人就不会被绝对定位弄糊涂了？