Question

我有一个带有图片的投资组合项目，它位于一个左右填充的区域内。问题是我需要图像到边缘并忽略节填充。我尝试添加负边距和我在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

Answer 1

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

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

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

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

孩子忽略父母填充

1 个答案: