Paragraph spacing with custom CSS

saxonburgshoppes · Member · Apr 19, 2011 at 3:30 am
Copy link

Add topic to favorites
I’m using the Twenty Ten theme and am trying to put spacing between paragraphs using custom CSS. Each paragraph starts with the tag, has a return to force a new line after the first line, and closes with a tag at the end of the second line. Using this formatting, there is space after each of these two-line paragraphs that looks like a blank line has been inserted. I’m trying to control this default spacing.

If I use inline styles, I can control this with the margin-bottom property, like so:



But I don’t want to do this with inline stylesheets. I figure that I should be able to make this change to the tag in the themes stylesheet using Custom CSS, but I can’t get it to work. Any changes are just never reflected in my blog. I *can* make other changes to the tag in the theme’s stylesheet– such as font-size– and these changes *do* appear in my blog.

Could it be that I need to change this property elsewhere in the CSS beside the tag?

Thanks,

Mike

The blog I need help with is: (visible only to logged in users)
devblog · Member · Apr 19, 2011 at 4:08 am
Copy link
Have you tried adding “!important” to your rule?
saxonburgshoppes · Member · Apr 19, 2011 at 11:11 am
Copy link
Thanks, devblog. I added “!important” as follows:

p {
margin-bottom:50px !important;
}

and it solved the problem.

I did a little research on “!important” and one of the descriptions I read said it’s a declaration that sets and overriding precedence when there are conflicts in properties between competing classes. Do you have any thoughts as to where there might be a conflict for this property? While working on this issue, I did search for other instances of the paragraph tag and didn’t see anything.

Thanks again for your help!
devblog · Member · Apr 19, 2011 at 2:28 pm
Copy link
There is one more global definition in the CSS code:
```
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,...
```
I didn’t see what was in the declaration block, though.

I’m guessing you were trying to see your changes on the main page (where the map is). If that’s the case, then you wouldn’t see them because you have inline CSS in your “p” tags. Inline CSS takes precedence over those rule defined in an external CSS file. If you remove those inline styles, you might not need to add “!importan” to your rule.

If you were trying to see your changes on the “Hello World” page, some times you have to be more “specific” when you’re defining your rules. Example:
```
#contents p {
 [rules]
}
```
Also, I see you copied the whole CSS in the CSS editor. That is not recommended since you’re duplicating code. Only your changes/additions to the CSS should be in that editor. Read this for more info:

http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

HTH
saxonburgshoppes · Member · Apr 19, 2011 at 5:20 pm
Copy link
I read through the csswiz posts and see why I shouldn’t copy the entire stylesheet into the CSS Stylesheet Editor field. I removed it and enter only the modification that I wanted:

p {margin-bottom: 0;}

However, my content still shows the extra space at the end of each paragraph. (I did confirm that I do not have inline stylesheets in the html code for the specific page in question.)

So just for kicks, I tried using the “!important” declaration in my modification as so:

p {margin-bottom: 0!important;}

and this *did* work.

So if I understood the info from the csswiz blog about why I should not paste the entire stylesheet into the CCS Stylesheet Editor window, it’s because my mods are loaded *after* the default stylesheet, and only my mods need to load.

So if my mod does *not* work without the !important declaration, and *does* work after I add it, it would seem that something is loading after my mod, and the !important declaration is needed to give precedence to my mod.

If you’re interested, the page with the text and html code in question is named “Home.” I have made sure that the inline styles for margin-bottom I had experimented with are gone. I’ve got some DIV tags to position and image and establish the two columns of text within the page’s content area, but I don’t think that any of these should be interfering.

Thanks again for your help. I also saw the note about the duplicate post I had put in the Themes area. I appreciate your patience and that of the other moderators.
devblog · Member · Apr 19, 2011 at 5:56 pm
Copy link
…and only my mods need to load.

No, your modifications are loaded _in addition_ to the default CSS.

<blockqutoe>
So if my mod does *not* work without the !important declaration, and *does* work after I add it, it would seem that something is loading after my mod, and the !important declaration is needed to give precedence to my mod.

Not necessarily. In this case, what I said about the “Hello World” page also applies to the “Home” page. Quoting myself:

<blockqutoe>
…some times you have to be more “specific” when you’re defining your rules.

So, the following code will work on your Home page without the “!important” rule:
```
#content p {
margin-bottom: 0;
}
```
devblog · Member · Apr 19, 2011 at 6:06 pm
Copy link
If you look at the default CSS, you will find the following definitions:
```
#content p,
#content ul,
#content ol,
#content dd,
#content pre,
#content hr{margin-bottom:24px;}
```
Notice that “#content p” was set to have a “margin-botton” of “24px” along with other elements. That’s why, in the code I gave you above, you need to be more specific and override the “default” value with yours.

Defining the margin-bottom to 0 using just the element selector wouldn’t work:
```
p {margin-bottom: 0;}
```
Why? because the default CSS had a more “specific” declaration:
```
#content p {margin-bottom: 24px;}
```
That’s why adding the “!important” rule worked.

Again, by being specific, you are overriding the default values with yours.

HTH

No items found.