Forum How do I...?

How do I extend the background area of an element without affecting the layout?

ralf.ebert
Hi,

I have a block element with a gray background like in this screenshot. The elements have been positioned with a baseline-grid in mind.
It looks like this:
https://www.dropbox.com/s/dfphw2277he24ec/prince-layout-box.jpg?raw=1

(I tried to embed the image but it shows up as broken in the preview:

)


How do I extend the background area of the block without affecting the layout (the position and size of the element should stay the exact same)?
I thought about using a padding/border and to compensate this with negative margins but this often destroys the alignment with the baseline grid because the margin might be combined with a margin from the adjacent element.
I was able to solve this in the browser using the somewhat-obscure 'outline' property which adds a border without affecting positioning, but this doesn't seem to be supported by prince.

Thanks in advance for ideas how to solve this :)

Greetings,

Ralf
mikeday
Perhaps using an absolutely positioned ::before and ::after pseudo-element?
ralf.ebert
Yes, this works great :)
Thanks!