Incomplete Live CSS in the editor

[Section8]

I am running Calibre 5.23 on Linux

Sometimes, when I have purchased a new ebook and am tweaking its formatting in the calibre editor, I will see situations where the "File preview" panel clearly shows some formatting "feature" that I want to change - such as big left and right margins - but the "Live CSS" panel will give no indication of the CSS rule causing this "feature"

I can usually just read through the CSS and figure out where the formatting is coming from, but I encountered this issue in this month's Tor.com free ebook, so decided to post this and see what the real issue is.

I have attached a small scrambled.epub file to this thread, which was built by deleting all the images and html files (except one) from this epub and then using the ScrambleEpub plugin to scramble the rest.

If you open this file in the Calibre editor, and then open "introduction.xhtml", you should see, in the File Preview panel, that it has unusually large left and right margins.

If you then click on any text in the editor, in the '<p class="TX">' class, you should see something like this in the "Live CSS" panel:

Matched CSS rules for p @20
OEBPS/styles/stylesheet.css  p.TX
font-style: normal 
font-weight: normal 
margin-bottom: 0px 
margin-left: 0px 
margin-right: 0px 
margin-top: 0px 
text-align: justify 
text-decoration-line: none 
text-decoration-style: initial 
text-decoration-color: initial 
text-indent: 1.4em 
--------------------------

Computed final style
font-style: normal 
font-weight: 400 
margin-bottom: 0px 
margin-left: 0px 
margin-right: 0px 
margin-top: 0px 
text-align: justify 
text-decoration-color: rgb(0, 0, 0) 
text-decoration-line: none 
text-decoration-style: solid 
text-indent: 28px 
--------------------------

This gives no indication of the cause of the huge margins.

In fact, it is this CSS rule:

div.body {
  margin: 0 5em 0 5em;
}

So why doesn't the Live CSS panel show that this CSS rule is involved in the formatting?

[kovidgoyal]

Live CSS shows yout the css that applies to the element and the css that is inherited from parent elements. margin is not an inherited property. If you specify a margin ona parent element, child elements dont get that margin also applied to them. It is true that visually it "looks like" the margin is applied to the child, but that's not actually the case.

[Karellen]

The margins are being set by <div class="body"> at the top of the page

The CSS rule is as follows which is setting

div.body {
  margin: 0 5em 0 5em;
}

Yes, strange that when you click in <p> the <div> styling is not captured in Live CSS