I have a recurring element that should appear along the whole righthand side of each page — stretched from the very top to the very bottom. I found that by using a negative margin on the @right region I could achieve this effect:

@page {
	size: US-Letter;
	
	@right {
		margin: -0.75in 0;
		padding: 0;
		
		content: element(thermometer);
		border: 1px solid blue;
	}
}

However, when I went to tighten up the overall @page margins a bit, the effect stopped working:

@page {
	size: US-Letter;
	margin: 0.5in;
	
	@right {
		margin: -0.5in 0;    // <--- acts as `margin: 0` instead :-(
		padding: 0;
		
		content: element(thermometer);
		border: 1px solid blue;
	}
}

Is there a more reliable way to get the @right region to overlap with the corner regions above and below it?

Edited 29 Jan 2020 by natevw

This seems to work fine for me:

<style>
@page {
    size: US-Letter;
    margin: 0.5in;

    @right {
        content: "test";
        margin: -0.5in 0;
        padding: 0;
        background: yellow;
        border: 1px solid blue;
    }
}
</style>

Is there only a problem when you flow an element to the margin box? Does the element have any margin or positioning properties applied to it?