Viewer Styles CSS margin on body ignored

Valjean · Yesterday, 05:02 PM

Hello,

First of all, thanks for the great application!!
I am trying to create a "custom" layout by using the Styles configuration.
In the previous versions this seemed to work, but in the newer versions it is not working anymore.
I am trying to add more margin on top and on the bottom, but I am not sure how to do that. Also the images seem to not be aligned correctly.

here is my css:

p, h1, h2, h3, h4, h5{
font-family: Bookerly !important;
margin-left: 6em !important;
margin-right: 6em !important;
line-height: 1.8 !important;
}

body {
height: 85% !important; <- does nothing
margin-top: 40px !important;
margin-bottom: 40px !important;
text-align: center !important;
font-size: 24px !important;
}

div{
margin-left: 1.25em !important;
}

* {
color: rgb(0,0,0) !important;
}

Click image for larger version

Name: problem.jpg
Views: 20
Size: 443.6 KB
ID: 218215

Thanks for your help

kovidgoyal · Yesterday, 10:58 PM

If you want to add page margins use the setting for that in the viewer preferences.

JSWolf · Today, 04:13 AM

1.8 is much too high a line height.

Valjean · Today, 11:42 AM

Thank you for the reply. I tried that, but unfortunately, that does not work.
It just cuts of from top and bottom of the picture, instead of pushing the text down (or up).
Please see the picture below.

What is interesting, is that in the past I could keep the background untouched and "push" the text from top and bottom without touching the background. Something has changed from previous versions. I used to replace the viewer.js or viewer.html with some back-up files I had and it worked ok. Now it does not work anymore. (could be that I may have lost the old back-up files - I reinstalled my linux system).
I tried a few older versions (7.1.0, 7.2.0, etc) but I did not find the one that works

Thanks again for your help.

@JSWolf, but I want the text to be spaced out. This is the line height I prefer. Do you mean it has a negative impact on the page overall?

Yesterday, 05:02 PM	#1
Valjean Junior Member Posts: 2 Karma: 10 Join Date: Sep 2025 Device: none	Viewer Styles CSS margin on body ignored Hello, First of all, thanks for the great application!! I am trying to create a "custom" layout by using the Styles configuration. In the previous versions this seemed to work, but in the newer versions it is not working anymore. I am trying to add more margin on top and on the bottom, but I am not sure how to do that. Also the images seem to not be aligned correctly. here is my css: p, h1, h2, h3, h4, h5{ font-family: Bookerly !important; margin-left: 6em !important; margin-right: 6em !important; line-height: 1.8 !important; } body { height: 85% !important; <- does nothing margin-top: 40px !important; margin-bottom: 40px !important; text-align: center !important; font-size: 24px !important; } div{ margin-left: 1.25em !important; } * { color: rgb(0,0,0) !important; } Thanks for your help

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
font-family in <body> HTML or body{} CSS?	enuddleyarbl	ePub	22	10-14-2022 10:52 PM
In CSS, * or body?	Arios	ePub	10	11-03-2015 10:15 AM
CSS: margin-top and margin	Leonatus	ePub	16	06-16-2014 04:29 AM
CSS <body> vs. <p> question	Amalthia	Conversion	7	01-21-2014 01:50 AM
CSS margin instead of margin-top, etc.	icallaci	Conversion	24	10-19-2013 09:52 AM

Yesterday, 10:58 PM	#2
kovidgoyal creator of calibre Posts: 45,519 Karma: 28548962 Join Date: Oct 2006 Location: Mumbai, India Device: Various	If you want to add page margins use the setting for that in the viewer preferences.

Today, 04:13 AM	#3
JSWolf Resident Curmudgeon Posts: 80,281 Karma: 148951761 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	1.8 is much too high a line height.

Today, 11:42 AM	#4
Valjean Junior Member Posts: 2 Karma: 10 Join Date: Sep 2025 Device: none	Thank you for the reply. I tried that, but unfortunately, that does not work. It just cuts of from top and bottom of the picture, instead of pushing the text down (or up). Please see the picture below. What is interesting, is that in the past I could keep the background untouched and "push" the text from top and bottom without touching the background. Something has changed from previous versions. I used to replace the viewer.js or viewer.html with some back-up files I had and it worked ok. Now it does not work anymore. (could be that I may have lost the old back-up files - I reinstalled my linux system). I tried a few older versions (7.1.0, 7.2.0, etc) but I did not find the one that works Thanks again for your help. @JSWolf, but I want the text to be spaced out. This is the line height I prefer. Do you mean it has a negative impact on the page overall?