Page List Interval After Paragraph

Question

If I have custom content, for example:

<p>my paragraph</p> <ul> <li>item1</li> <li>item2</li> </ul> 

This displays a paragraph break between the end of the paragraph and the list as follows:

my paragraph

• item1
• item2

I know that I can get rid of the space in my CSS by setting margin-top on the UL tag and the bottom edge on the p tag, but is there any way to do this without affecting the margins between the actual paragraphs.

Content is created by users with a limited set of available tags and without fonts, sizes ... available, so all formatting should be done in CSS, if possible, without having to put classes in tags.

EDIT: I must know, because CSS works with CSS collapse, I could usually set

 p { margin-bottom:0; } li { margin-top:0; } 

Separation would be correct in both cases, since the margin-top property on the p tag would still be 1, but I already set margin-top to 0.2em for a smaller gap between h2 and p-tags.

Answer 1

This is an ideal use case for a selector. However, it does not work in IE6 or IE7.

 p { margin: 0; } ul { margin-top: 0; margin-bottom: 0; } p + p { margin-top: 15px; } p + ul { margin-top: 3px; } ul + p { margin-top: 3px; } 

So what happens here, I set the appropriate fields to 0 on p and ul, and then tell any compatible browsers to look for p, which is after p and adds an upper marker to it. The same goes for ul after p (although this is a small margin), and p after ul (a large margin again).

Again, this does not work in IE6 and 7, so you can use conditional comments to get a decent (if not perfect) look at these browsers.

Answer 2

If you want to target ul elements, use the adjacent selector.

 p + ul { margin-top: 0; } 

There is no suitable way to set the lower margin p this way, but if necessary you can use negative margin on ul .

Answer 3

Other answers work well, again, as they said, except IE6 / 7. However, understand that you will not affect the margin between paragraphs if you set the bottom margin of p to 0, if you set the top margin for p as the larger of the two values ​​that your margins currently have. If you have no problem setting the top edge of ul to 0, then your margin interval p will not be affected. So let's say you have this for now:

 p {margin: 10px} 

Setting this parameter:

 p {margin: 10px 10px 0} 

Will not affect the margin between p tags (which seems to bother you) as the bottom 10px field collapses with the top to make only 10px space. If at the moment the lower field is set larger than the upper field, you will need to change the upper field to a larger value to see the same interval that you were. Now, if you want to get the bottom margin in the last p , then you have to adapt to this.

If the user type falls into a specific div wrapper that you can target (via id or class ), you can just set these styles for p and ul only for use inside that wrapper if this is a concern.

Answer 4

It depends on the rest of your code, but you should be fine:

 p{ margin-bottom:0; } 

You might think that this will affect all the rest of your paragraphs, but because of the CSS "bordering" function, it actually shouldn't - if you are in standard mode with a valid DOCTYPE.

Let me know if you need more explanation - or if it doesn't work.

Answer 5

If you have a design, for example below:

 <p>my paragraph</p> <ul> <li>item1</li> <li>item2</li> </ul> 

And CSS like:

 p { margin: 0 0 25px 0; } 

this may cause a gap between P and LIST.

I solved this problem using a negative field:

 p + ul { margin-top: -20px; }