li, p and inheritance

[oceanclub]

How does CSS inheritance work with li and p? I had set some margin and padding properties on body, assuming that li and p inherit these. Looking at my output this does not seem the case. Where do I set these to avoid having to set them in duplicate - or is this possible?

P.

[TaylorTalkington]

I can reproduce your issue in a new Flare project.

Looking at the CSS reference over at w3schools for the margin and padding properties, they both are not inherited (Inherited: No), so by default those values will not cascade down to child elements.

Playing around with styles, setting either to inherit doesn't work either because browsers (Chrome at least, and it looks like MadCap's internal renderer is also doing it) have a default 'user agent style' that sets the margin and the padding may be set somewhere else:

user agent p styles.png

Setting the margin/padding directly on p does work as expected, but you obviously wanted to avoid that.

I couldn't find a good way of doing this, but maybe this will point you in the right direction.

[NorthEast]

How does CSS inheritance work with li and p? I had set some margin and padding properties on body, assuming that li and p inherit these. Looking at my output this does not seem the case. Where do I set these to avoid having to set them in duplicate - or is this possible?

P.

You can set properties for a number of tags at the same time, by separating them with a comma.

Code: Select all

li,
p
{
...
}

[ChoccieMuffin]

And if you want to have a p inside a li NOT having the margin/padding you've applied to an ordinary p, use a complex selector:

For example, if you have 20px margin on a p and a li but you don't want the p inside a li to be indented by 40px:

Code: Select all

li, p
{margin-left: 20px;
}

li p
{
margin-left: 0;
}

Hope that helps. And definitely worth looking at the w3schools.com site - bookmark it, you'll find you keep popping back there.