confused about style inheritance

[lumpynose]

I thought that styling applied to upper level tags was inherited by tags that were enclosed in them. E.g., any styling on the html tag would be inherited by the body tag and/or any styling on the body tag would be inherited by the p tags. But that doesn't seem to be the case. My css file contains

body {
    font-size: 100%;
    border-bottom: 0;
    border-top: 0;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
}
p {
    display: block;
    font-size: 1em;
    text-indent: 1.5em;
    text-align: left;
}

But Sigil's previewer is not using them; you can see that they're lighter in this screen capture and have lines through them, while Calibre's editor doesn't show the lighter ones and does show the line through the font-size.



Can someone explain to me what's going on?

[jhowell]

It is more complicated than you think. Read a CSS tutorial.

Margins and padding are not inherited.

Font-size can be inherited. 100% means make it the same as its parent element’s font size, which is the default anyway.

[lumpynose]

Originally Posted by jhowell

It is more complicated than you think. Read a CSS tutorial.

Ugh, ok.

[Turtle91]

Hi,

Generally, when you define an element like you did, you are defining each element's attributes (it's box model: margin, border, padding, etc.). You are not defining it's child element's. If you want a specific attribute to inherit from it's parent you need to set it to 'inherit'.

eg.

p {color: inherit}

Here is a link to a better explanation of inheritance.

Having said that, when you set the body font-size to 100% your are setting the baseline font size for the document. When you then define font-size within a child element using EMs then that is relative to the font-size you set in the body. Clear as mud?
1em = 1 times the size you set in body
1.2em = 1.2 times the size you set in the body
2em = 2 times, etc.

That way, when a browser/reader/app changes the overall font size, then each font remains the same size relative to each other, ie the header will still stay 1.2 times the size of the normal paragraph font size if you used the following css:

body {font-size: 100%; margin: 0; padding: 0; border: 0}
h1   {font-size: 1.2em; font-weight: bold}
p    {font-size: 1em}

[lumpynose]

Ok, thanks. So it sounds like what some people have said in this thread isn't correct:

https://www.mobileread.com/forums/sh...d.php?t=316965

[lumpynose]

Here's a nice page on inheritance:

https://webplatform.github.io/docs/t...e_and_cascade/

[jhowell]

Originally Posted by Turtle91

1em = 1 times the size you set in body
1.2em = 1.2 times the size you set in the body
2em = 2 times, etc.

Technically em units are relative to the element's parent, which is not always the body element.

[Turtle91]

Originally Posted by jhowell

Technically em units are relative to the element's parent, which is not always the body element.

Valid. In the example the body was the parent, but it doesn't have to be.

[Turtle91]

Originally Posted by lumpynose

Ok, thanks. So it sounds like what some people have said in this thread isn't correct:

https://www.mobileread.com/forums/sh...d.php?t=316965

Hi lumpynose,

There was a lot of discussion in that thread about how to fix a specific rendering issue with a specific piece of software using negative margins. Be careful when using someone's work-around as a template for all styling! lolz