Changing the formatting and layout of an autonumbered paragraph

Just paying back the support I got when I started.

www.grainge.org

Thank you Amber! That helped a ton and thank you Peter as well for getting me started on this. I don't know what I would do w/out the support of folks like you in this forum.

Yes, my explanation was simplified, and margin-right will do the same thing in this case.

The box model shows where margin and padding are applied:
https://www.w3schools.com/css/css_boxmodel.asp

In many situations the difference doesn't matter, but comes in to play when you set top and bottom margins, which can overlap, causing a narrower gap than intended.

Except both margin-right and padding-right are doing the same thing in this case. On the w3xchools site it is easy to see the difference when content is in a table, following the links above. With autonumber, it's not so easy.

Maybe some experimentation with other margin and padding settings would reveal the difference, if there is one with autonumber.

www.grainge.org

It might help to think of the auto-number setting as splitting the paragraph into two chunks: one chunk for the number and one chunk for the rest of the text. Normally the number chunk is just big enough to fit the number. The padding-right says "actually, I want my number chunk to be bigger, and I want to stick the extra space on the right-hand side".

Amber is probably in bed by now. She's in Oz.

Change it and you will see. 🙂

If you go to the page below you will see an explanation of margins. There is also a test it for yourself button.

https://www.w3schools.com/css/css_margin.asp

Immediately below is the same thing for padding. With content within a border, it's easy to see how the two work.

In your case, you are working with an Autonumber setting that is valid CSS but it introduces another complication. Both margin and padding impact the gap here so earlier it was in fact the total of the two. When margin was set to zero, the total was just the padding setting.

You can comment out any line in CSS by adding /* before it and */ after it. Do that with the padding setting and you will see there is no space at all between the two.

That's about as clear as I can make it. 🙂

www.grainge.org

Thank you Amber, but I will be the first to admit - I am still a relative CSS newbie. What does the right padding setting have to do w/ the gap between the auto-number portion of the tag and the text of the tag?

Thank you again,

TVB

It took me a couple of days of thinking about it to make the connection I admit 🙂

Thanks Amber, I missed that. Apologies.

www.grainge.org

To remove the extra space, go in to the p.warning::before style and remove the padding-right value. That's why you can't make it any smaller than a certain value.