Log in / Register

Forum › How do I...?

How do I make margins different from the margins for the page?

Vik
I have margins for page:
@page {
margin-left: 5px;
margin-right: 200px;
}

Also in my doc I have header (@top-center { margin-left: 5px; margin-right: 5px;}) and footer (@bottom-centre with the same margins). But in result I received margins for header and footer margin-left: 5px + 5px = 10px and margin-right: 200px+5px = 205px. It is not that I want. How can I reach needed result?
mikeday
Perhaps you could put the margin on the HTML body element instead?
Vik
does not work for me if I add margins to HTML element directly, they will be applied relative to the margins specified in the @page ("!important" also not to override them).
mikeday
Could you reduce the @page margin-right to 5px and put a margin-right of 195px on the HTML body?
Vik
I could, but I need to apply margins for @page element BECAUSE I use some side panel (with the help of @right-top and @left-top elements) and I need to have enough space for them. If I keep margin for @page 5px, I guess I loose my side panel (for example right panel) for which I needed 200 pixels of space (exclude header width).
  1. Need.JPG‎ 27.2 kB ‎
    Template which I need
  2. What I have.JPG‎ 31.7 kB ‎
    Template which I have because @page marg

Edited by Vik

howcome
Perhaps you could use the sidenote area instead of @right-top?

https://css4.pub/2023/sidenotes/
Vik
It is work like expected, BUT I need repeat the same side panel on every page, how to do it with @leftnote/@rightnote?
howcome
How about:
<html>
<style>
@page {
  margin: 10vw;
  @top-center { content: "top-center"; background: red; margin-right: -10vw }
  @right-top { content: "right-top"; background: blue }
}
</style>
<body>
hello world
</body>
</html>
  1. foo.html‎ 0.2 kB

Edited by howcome

Vik
As I understood correctly: negative margins are not supported in Prince. isn't it?
howcome
Prince supports negative margins, as shown in the code above.

Edited by howcome

Vik
excelent, It helped me, thx!