我正在尝试创建一列文本，它由一系列文本 block 组成，其中一个文本 block 具有超出列外的彩色背景。我想以两种不同的方式做到这一点，第一种是文本布局不受影响，第二种是有额外边界空间的地方:
我想这应该比我做的容易得多。
我一直在尝试通过用 div 元素包围每个 block 来做第一个，边距为 10px，然后对于突出显示的 block ，设置边距为 0px，填充为 10px。
这适用于普通段落。问题是，当文本 block 以标题(例如，h3 标题)开头时，底部、左侧和底部的填充效果很好，但顶部填充的添加量超出了预期，甚至无法手动填充调整，因为 padding-top:1px 和 padding-top: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，这是额外边界空间的解决方案(右手在图片上)。如果有人知道如何保持不受干扰的布局(左手在图片上)，那就太好了。这是否需要同样的技巧 - 手动更改突出显示 block 上方段落的边距底部，以及下方段落的边距顶部？我希望能够动态地做到这一点——在滚动到 anchor 链接时添加一个闪烁然后淡出的背景。您可以动态更改 block 本身、下面的段落和上面的段落，但这看起来很尴尬。
最佳答案
我建议您先将列的宽度设置为固定的像素数，或者使用它所在的任何 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; }
关于html - 如何创建一个到达文本栏之外的背景颜色突出显示框[提供的图片]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23071957/