Hello there, I have this rule: .class1 {padding-bottom: 1em;} now I want to use <p> element under class1 attribute in a way that the declaration value (1em) of the class1 selector changes to (0.5em). Example: <div class="class1"> <p> text content </p> <p> text content </p> <p> text content </p> <div> Now I want padding-bottom of <div> to become 0.5em instead of 1em when the code ends with </p>, without affecting the margins between the other <p> elements. Hope you got what I mean
I would... lose the padding on the DIV, use padding instead of margins on P (so as to have no collapse issues), then use a negative margin on the bottom of the div equal to the bottom padding on the P minus 0.5em. As a rule of thumb I kill margins on P and use padding instead. If you want 0.5em all-around and 1em between P, padding:0.5em; is much cleaner than playing any margin tricks/games... or just set padding on the bottom only which is what I do on 99% of my pages. padding:0 0 1em; is often far easier to deal with than keeping track of margin collapse. Are you using the defaults for P, or are you using custom spacing? If I could see a bit more of your CSS I could probably dial in a solution better.
Just add another class to only affect paragraph elements within that class, so: .class1 {padding-bottom: 1em;} p.class1 {padding-bottom: .5em;} Now everything in the class that is in paragraph tags will have a padding of .5, everything else will have a padding of .1. I believe that's what your asking.