[Ohio66]

How can I change the paragraph style only within a specific div? The div in question is .xheader below. In the .xheader div I want no margin/space between paragraphs. There is substantial existing html code like this so change must be in css only.

Here is my css code:

.xbody { text-indent: 0px; }
.xheader { text-indent: 8px; }

And here is the html code:

<div class="xbody">
    <div class="xheader">
        <p>This is the first paragraph in the header.</p>
        <p>This is the second paragraph in the header.  There should be 
           no margin or space between this paragraph and the first one.</p>
    </div>
    <p>This is the first paragraph in the body.</p>
    <p>This is the second paragraph in the body.  Normal paragraph margin/spacing should apply.</p>
</div>

And here is how the result should appear:

  This is the first paragraph in the header.
  This is the second paragraph in the header.  There should be no margin or space between this paragraph and the first one.

This is the first paragraph in the body.

This is the second paragraph in the body.  Normal paragraph margin/spacing should apply.

[EnvXOwner]

You would go

.xblah p {
    text-indent: (num)px;
}

[Ohio66]

I should have mentioned that I tried something like that but it did not work. And it's not the indent that I want to change, it's the spacing or margin (not sure what I should call it technically) between the paragraphs. Here is what I tried:

.xheader p { margin-top: 0px; margin-bottom: 0px; }

Again, it did not work. There is still a normal space between the two paragraphs in the header.

[EnvXOwner]

Ohio66, on 30 June 2011 - 03:42 PM, said:

I should have mentioned that I tried something like that but it did not work. And it's not the indent that I want to change, it's the spacing or margin (not sure what I should call it technically) between the paragraphs. Here is what I tried:

.xheader p { margin-top: 0px; margin-bottom: 0px; }

Again, it did not work. There is still a normal space between the two paragraphs in the header.

Okay I understand what you're talking about now.

margin-top and margin-bottom will change the margins. Are you trying to set it to 0? I think you should check out Eric Meyer's CSS reset. It can fix many of these issues.

[Ohio66]

I don't really understand how to use any of the code at the link you provided, and it does seem very complex and appears to address cross-browser issues rather than what I am trying to do. Having been told that css is extremely powerful and flexible I had assumed that it would be very easy to set the spacing between paragraphs in a specific div. I tried what was obvious (what you suggested) and it does not work. Am I missing something else? Here is the css code I ended up with:

.xbody { text-indent: 0px; }
.xheader { text-indent: 8px; }
.xheader p { margin-top: 0px; margin-bottom: 0px; }

I was assuming that paragraphs within the .xheader div would have no spacing between them - in other words as if a <br /> had been used instead of <p></p>. That's what I really want. Too much existing code to change to <br /> so I need to do it in css.

This post has been edited by Ohio66: 30 June 2011 - 01:48 PM

[EnvXOwner]

Ohio66, on 30 June 2011 - 04:46 PM, said:

I don't really understand how to use any of the code at the link you provided, and it does seem very complex and appears to address cross-browser issues rather than what I am trying to do. Having been told that css is extremely powerful and flexible I had assumed that it would be very easy to set the spacing between paragraphs in a specific div. I tried what was obvious (what you suggested) and it does not work. Am I missing something else? Here is the css code I ended up with:

.xbody { text-indent: 0px; }
.xheader { text-indent: 8px; }
.xheader p { margin-top: 0px; margin-bottom: 0px; }

I was assuming that paragraphs within the .xheader div would have no spacing between them - in other words as if a <br /> had been used instead of <p></p>. That's what I really want. Too much existing code to change to <br /> so I need to do it in css.

You copy paste the CSS in the link, then you put it in it's own CSS file. Then at the top of your CSS stylesheet that you use for everything else you add @import url('reset.css');.

To set a specific spacing between elements you use the margin attribute as you have been using. there's no reason to use margins on the element as the reset will do that. This may be a padding issue and not a margin issue.