Distance between <p> tags (paragraphs)

Hi say if I have two paragraphs as follows:

<p> test 1 paragraph </p>

<p> test 2 paragraph </p>

Is there any way to control the distance between the two paragraphs in CSS?

thanks, u2fan

You can use padding or margin properties.

Using CSS:


p
{
margin: 0;
padding: 0;
}

Hi,

As mentioned above you can control the distance between elements by addressing the margin and padding properties of those elements.

By default most tags have different amounts of each applied to them by the various browsers so its good to set them explicitly to the dimensions you require. When bringing two elements close together you basically need to reduce the bottom margin and padding on the top element and the top margin/padding on the bottom element.

It’s no good reducing just the top element as the largest margins will always win out. In your case the paragraphs are the same element so just setting padding and margin to zero will bring all p’s clsoer together anyway. However it wont bring a p closer to any other following element (excluding p) unless you address the margins/padding of that following (or preceeding) element.

Paul

However it wont bring a p closer to any other following element (excluding p) unless you address the margins/padding of that following (or preceeding) element.
…unless that element has no margins or paddings by default, such as div.

Margins collapse, paddings don’t. http://www.w3.org/TR/REC-CSS2/box.html

<edit>Consider this example:

<p>Foo</p>
<div>Bar</div>

Now, as default, they will be separated due to the margins of p. Let’s get rid of those margins:

<p style="margin:0;">Foo</p>
<div>Bar</div>

Now, these two blocks have moved closer to each other, haven’t they? ;)</edit>

Yes thats just the exception that proves the rule :slight_smile:

However that clouds the issue a bit because a div is generic block level container and as such has no default padding and margins applied. However that may not always be the case as UA’s may well decide to include defaults in the future (granted that this is unlikely but you never know :slight_smile: ). The specs on default margins/padding are informative and not compulsory so UA’s are allowed to differ in some way (and most do) .

However the main point of my post is still valid and reffered to the standard html block level elements of document structure such as h1,h2,h3,h…, p,ul,ol,li, form,dl,dt,dd etc… All these elements may or maynot have varying amounts of margins/padding added and the only way to be sure you get what you need is to do it yourself :slight_smile:

Margins collapse, paddings don’t.

Only the smallest margin collapses on elements (excluding floats) but there is also the compound collapsing of margins where nested elements (especially ul’s) are concerned. However this is handled differently and incorrectly by some browsers and my advice still holds true either way ;).

Padding doesn’t collapse as you quite rightly point out but as i stated in my post you will need to address the padding on both elements just like you need to address the margins on both elements (if any exist) to effect a complete removal of space. Of course then we need to take into account the line-heights of each element but lets not go there right now :slight_smile:

If you take the form element for example you will find that some browsers apply no styling to it while others give it a great big margin.

The best way is to explicitly control the margins and padding of elements that you use unless you are not concerned about the odd discrepancies that will occur.

Of course you can go one step further and get rid of all padding/margins in one go :).


* {margin:0;padding:0}

Paul

Generally, I like applying that to the top of my style sheets. Something like this:

  • {
    margin:0;
    padding:0;
    }

ul, ol {
padding-left:2em;
}

I often use unordered/ordered lists, and so need to restore the padding. Also, this enables all browsers to agree on using padding to provide space for bullets/numbers, as IE thinks that a margin should be used for the space, while Gecko-based browsers believe it should be padding. If you’ve got a background for a list or are using a border, it’s helpful. But eliminating padding and margins for all elements, and restoring to those elements you need will help you with positioning issues.