I want to create a column of text with blocks where one block has a colored background that extends beyond the confines of the column. I'm looking to achieve this in two ways: first, maintaining the original text layout, and secondly, adding extra bounding space.
It seems like it should be simpler than I'm finding it.
My attempts involve enclosing each block in a div element with a 10px margin. For the highlighted block, I set a margin of 0px and a padding of 10px.
This method works fine for regular paragraphs. However, when a block starts with a heading (such as an h3 heading), excessive top padding is added – which cannot be manually adjusted easily due to limited values between `padding-top:1px` and `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>
I'm unsure how to maintain an undisturbed layout. Any suggestions?
Edit: Thanks to aaronegan and sfyn below, we've solved the issue of extra bounding space (right-hand portion in the picture). Now, if anyone knows how to keep the layout undisturbed (left-hand side in the picture) or achieve a dynamic background change when scrolling to an anchor link, that would be greatly appreciated. Perhaps tweaking margins dynamically above and below the highlighted block could work, but it seems cumbersome.