Question

我正在尝试创建一列文本，其中包含一系列文本块，其中一个块具有到达列外部的彩色背景。我想以两种不同的方式做到这一点，第一种是文本布局不受影响，第二种是有额外的边界空间：

我怀疑这应该比我制作它容易得多。

我一直试图通过用div元素围绕每个块来做第一个，边缘为10px，然后对于突出显示的块，设置0px的边距，以及10px的填充。

这适用于普通段落。问题是，当文本块以标题（例如，h3标题）开头时，底部，左侧和底部的填充效果很好，但顶部填充增加了比想要的更多，甚至无法手动填充调整，因为填充顶部之间有一个非常大的跳跃：1px和填充顶部：0px。

<html>
<body>
    <div class="block">
        <p>
        Test Test Test Test Test Test
        </p>
    </div>
    <div class="block test2-block">
        <h3>Test Title</h3>
        Test2 Test Test Test Test Test
    </div>
    <div class="block">
        <p>
        Test3 Test Test Test Test Test
        </p>
    </div>
</body>
<style>
    .block {
        margin:10px;
    }
    .test2-block {
        background-color:green;
        margin:0px;
        padding-right:10px;
        padding-left:10px;
        padding-bottom:10px;
        /*This value can't be tweaked manually, try 0, 1, and 10 pixel values*/
        padding-top:10px;
    }
</style>
</html>

我根本不确定如何处理不受干扰的布局。有人可以给我一个指针吗？

编辑：感谢下面的aaronegan和sfyn，这是额外边界空间的解决方案（右图）。如果有人知道如何保持不受干扰的布局（左手在图片上），那将是一流的。这是否需要相同的技巧 - 手动更改突出显示的块上方的段落的margin-bottom，以及下面段落的margin-top？我希望能够动态地执行此操作 - 在滚动到锚点链接时添加闪存然后淡入淡出的背景。你可以动态地改变块本身，下面的段落和上面的段落，但它看起来很尴尬。

Answer 1

我建议首先以固定的像素数量设置列的宽度，或者使用它所在的任何div的宽度％。

你的h3引起的问题是，默认情况下，它有一个margin-top属性。因此虽然p看起来不错，但由于这个原因，h3在顶部有额外的空间。

这就是我的所作所为：

在css中设置列的宽度（无论你想要什么）
从您的手中移除不必要的填充底部/顶部/右侧/左侧 .test2-block类，只有填充10px

使用以下方法覆盖CSS中的h3 margin-top：

.block {
    margin:10px;
    width:200px;
}

.test2-block {
    background-color:green;
    margin:0px;
    padding:10px;
}

.test2-block h3 {
    margin-top:0px;
}

Working JS Fiddle Here

如何创建一个到达文本列外部的背景颜色突出显示框[提供的图片]

1 个答案: